javascript - React Hooks，如何在两个函数之间共享状态

Question

我有 Vue 背景，我很难理解当 HTML 分成多个部分时如何有条件地显示某些内容。

假设我有以下结构:

import React, { useState } from "react";
const [mobileNavOpen, setMobileNavOpen] = useState(false);

function Home() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav />}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)}
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

我如何才能在 Home() 和 MobileNav() 中访问 [mobileNavOpen, setMobileNavOpen]。基本上我想要实现的是一个 Home 组件，用户可以按下一个按钮，在该按钮上打开 MobileMenu 组件，然后使用另一个按钮再次关闭菜单。

现在，从顶部开始的第二行const [mobileNavOpen, setMobileNavOpen] = useState(false);导致错误:无效的 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。但是我应该把它放在哪里呢？

此行是否应该位于 Home() 组件中，并且所有子组件都发出一个事件来显示或关闭菜单？或者我是否需要一个状态管理库来完成这样简单的事情？执行此操作的“React”方式是什么？

Answer 1

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={() => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen} />}
    </div>
  );
}

function MobileNav({setMobileNavOpen}) {
  return (
    <div>
      <button
        onClick={() => setMobileNavOpen(false)}
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

1. 您必须将 useState Hook 移至组件主体
2. 将状态 setter 函数传递给您的子组件