是否可以在其他上下文中使用带有响应（钩子）的上下文？

Question

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

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

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

Answer 1

是的，可能的话，您需要在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>
  );
};