Jak stworzyć wiele statycznych warunków w New CONTEXT API w React 16.6


Cześć, próbuję uzyskać dostęp do wielu kontekstów w składniku, ale udaje mi się tylko z jedną wartością kontekstu od dostawcy. istnieje dwóch dostawców:
ListContext
i „MappingContext. Jak mogę uzyskać dostęp do takich kontekstów:
class TableData extends React.Component {
static contextType = ListContext;
static contextType = MappingContext; componentDidMount() {
const data = this.context// it will have only one context from ListContext
}

Wiem, że mogę używać wielu dostawców w render (), ale chcę uzyskać dostęp do kontekstów, jak opisano powyżej. Każda pomoc byłaby bardzo mile widziana.
podziękować
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jednym z obejść jest użycie opakowania, które łączy oba konteksty w jeden, a następnie eksportuje opakowanie. Istnieje kilka sposobów implementacji powłoki, ale oto jeden:
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 => {
return ( <Context1.Consumer>
{context1 => ( <Context2.Consumer>
{context2 => ( <ContextCombined1And2.Provider value={{ context1, context2 }}>
{props.children}
</ContextCombined1And2.Provider>
)}
</Context2.Consumer>
)}
</Context1.Consumer>
);
};
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 => {
return ( <ProvideCombinedContext>
<Need2Contexts {...props}/>
</ProvideCombinedContext>
);
};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 ( <div className="App">
<Context1.Provider value="value1">
<Context2.Provider value="value2">
<Need2Contexts/>
</Context2.Provider>
</Context1.Provider>

);
}const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

Możesz zobaczyć to w akcji i pobawić się tutaj:
https://codesandbox.io/s/xv373l5ynz
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jest to wyjaśnione w

kontekst dokumentacji do zareagowania
https://reactjs.org/docs/conte ... ttype
:

Za pomocą tego interfejsu API można subskrybować tylko jeden kontekst. Jeśli chcesz przeczytać więcej niż jeden tekst, zajrzyj do sekcji

Korzystanie z wielu kontekstów
https://reactjs.org/docs/conte ... texts
.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się