Можно ли использовать контекст внутри другого контекста с реагировать (хуки)?

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 как-то не определены, в то время как асин c вообще не выполняется. Я думал, что это возможно, поскольку 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>
  );
};