在父上下文中反应使用上下文值

Question

我的 app.js 文件中有 2 个上下文：

function App() {
  return (
      <AuthContext>
        <ChildContext>
         <Template />
        </ChildContext>
     </AuthContext>
  );
}

当用户注销时，我想访问 ChildContext 中的值，但是 logout 函数在 AuthContext:

中

// inside AuthContext:
const myContext = useContext(ChildContext);
const logout = () => {
  // doing some stuff..
  //
  // here is the problem:
  console.log(myContext.some_value);
}

错误是：

cannot read property 'some_value' of undefined

那是因为ChildContext是在AuthContext之后声明的。那么我怎样才能到达 AuthContext 内的 some_value？

Answer 1

在 React 中 data flows down，所以你的选择是：

ChildContext 成为 AuthContext 的 parent。
将 logout 函数移动到它自己的上下文中

function App() {
  const logout = () => {
    /*...*/
  };
  return (
    <LogoutContext value={logout}>
      <AuthContext>
        <ChildContext>
          <Template />
        </ChildContext>
      </AuthContext>
    </LogoutContext>
  );
}

在父上下文中反应使用上下文值

react use context value inside a parent context

javascript

reactjs

react-context