是否可以通过反应（钩子）在另一个上下文中使用上下文？

Posted 2023-04-14

【中文标题】是否可以通过反应（钩子）在另一个上下文中使用上下文？

【英文标题】：Is it possible to use a context inside another context with react (hooks)?

【发布时间】：2020-05-07 05:44:17

【问题描述】：

当我有两个上下文时，其中一个在另一个上下文中：

  ...
    <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 内部？

在这一点上，我真的不知道这是不可能的，或者我的代码总体上是否有问题。

【问题讨论】：

尝试在你的 value 属性周围添加第二组花括号。所以 value=valueOne

这只是一个小例子。 @Yoshi contextOne 也可以 return valueOne，这将使这段代码有效，但问题更笼统，而且不仅仅是基于这个最小的例子。

【参考方案1】：

是的，有可能，您需要在ContextTwo 包装器中使用useContext，例如：

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