Hola, estoy tratando de acceder a múltiples contextos en un componente, pero obtuve éxito con solo un valor de contexto del proveedor. hay dos proveedores ListContext y `MappingContext. ¿Cómo puedo acceder a contextos como este?

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

Sé que puedo usar múltiples proveedores en render () pero quiero acceder a los contextos como arriba. Cualquier ayuda será apreciada.

Gracias

Una solución alternativa es usar un contenedor que combine los dos contextos en uno y luego exportar el contenedor. Hay varias formas de implementar el contenedor, pero aquí hay una:

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); 

Puedes ver esto en acción y jugar con él aquí:

Editar xv373l5ynz

Esto se explica en la documentación del contexto Reaccionar :

Solo puede suscribirse a un contexto único con esta API. Si necesita leer más de uno, vea Consumir múltiples contextos .