Привет я пытаюсь получить доступ к нескольким контекстам в компоненте, но я добился успеха только с одним значением контекста от поставщика. Есть два провайдера ListContext и `MappingContext. Как я могу получить доступ к контекстам, как это:

 class TableData extends React.Component { static contextType = ListContext; static contextType = MappingContext; componentDidMount() { const data = this.context // it will have only one context from ListContext } 

Я знаю, что могу использовать несколько провайдеров в render (), но я хочу получить доступ к контекстам, как указано выше. Любая помощь будет оценена.

Благодарность

Одним из обходных путей является использование оболочки, которая объединяет два контекста в один, а затем экспортирует оболочку. Существует несколько способов реализации оболочки, но вот один из них:

Contexts.js

 import React from "react"; export const Context1 = React.createContext("1"); export const Context2 = React.createContext("2"); export const ContextCombined1And2 = React.createContext("3"); 

ProvideCombinedContext.js

 import React from "react"; import { Context1, Context2, ContextCombined1And2 } from "./Contexts"; // This is a reusable piece that could be used by any component that requires both contexts. const ProvideCombinedContext = props ={amp}gt; { return ( {amp}lt;Context1.Consumer{amp}gt; {context1 ={amp}gt; ( {amp}lt;Context2.Consumer{amp}gt; {context2 ={amp}gt; ( {amp}lt;ContextCombined1And2.Provider value={{ context1, context2 }}{amp}gt; {props.children} {amp}lt;/ContextCombined1And2.Provider{amp}gt; )} {amp}lt;/Context2.Consumer{amp}gt; )} {amp}lt;/Context1.Consumer{amp}gt; ); }; export default ProvideCombinedContext; 

Need2Contexts.js

 import React from "react"; import { ContextCombined1And2 } from "./Contexts"; import ProvideCombinedContext from "./ProvideCombinedContext"; class Need2Contexts extends React.Component { static contextType = ContextCombined1And2; componentDidMount() { console.log("Context="   JSON.stringify(this.context)); } render() { return "this.context="   JSON.stringify(this.context); } } const WrappedNeed2Contexts = props ={amp}gt; { return ( {amp}lt;ProvideCombinedContext{amp}gt; {amp}lt;Need2Contexts {...props} /{amp}gt; {amp}lt;/ProvideCombinedContext{amp}gt; ); }; export default WrappedNeed2Contexts; 

index.js

 import React from "react"; import ReactDOM from "react-dom"; import { Context1, Context2 } from "./Contexts"; import Need2Contexts from "./Need2Contexts"; function App() { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;Context1.Provider value="value1"{amp}gt; {amp}lt;Context2.Provider value="value2"{amp}gt; {amp}lt;Need2Contexts /{amp}gt; {amp}lt;/Context2.Provider{amp}gt; {amp}lt;/Context1.Provider{amp}gt; {amp}lt;/div{amp}gt; ); } const rootElement = document.getElementById("root"); ReactDOM.render({amp}lt;App /{amp}gt;, rootElement); 

Вы можете увидеть это в действии и поиграть с этим здесь:

Редактировать xv373l5ynz

Это объясняется в документации по контексту React :

Вы можете подписаться только на один контекст, используя этот API. Если вам нужно прочитать более одного, см. « Использование нескольких контекстов» .