当我有两个上下文时,其中一个在另一个上下文中:
...
<ContextOne.Provider value={valueOne}>
<ContextTwo.Provider value={valueTwo}>
{children}
</ContextTwo.Provider>
</ContextOne.Provider>
...
难道ContextTwo
现在使用ContextOne
:
// ContextTwo.jsx
...
const contextOne = useContext(ContextOne);
console.log(contextOne.valueOne); // returns undefined
...
基本上,ContextOne
转换valueOne
为状态(useState
),并且ContexTwo
需要使用该状态。就我而言,的值contextOne
在某种程度上是不确定的,而根本没有异步操作。我以为这是可能的,因为ContextTwo.Provider
在里面ContextOne.Provider
?
在这一点上,我真的不知道这是不可能的还是我的代码总体上有问题。
是的,有可能,您需要useContext
在ContextTwo
包装器内,例如:
const ContextOne = createContext();
const ContextTwoInner = createContext();
const ContextTwo = ({ value, children }) => {
const valueOne = useContext(ContextOne);
console.log(valueOne);
return (
<ContextTwoInner.Provider value={value}>
{children}
</ContextTwoInner.Provider>
);
};
// For OP's code to work
ContextTwo.Provider = ContextTwo;
// Logs valueOne
const App = () => {
return (
<ContextOne.Provider value={valueOne}>
<ContextTwo.Provider value={valueTwo}>
<div>Hello</div>
</ContextTwo.Provider>
</ContextOne.Provider>
);
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句