使用 React 中的功能组件更改另一个组件的状态答案

【问题标题】：Change the state of another component using functionnal components in React使用 React 中的功能组件更改另一个组件的状态
【发布时间】：2022-11-13 07:24:20
【问题描述】：

我的标题中有一个按钮，它必须切换页面横向菜单的状态（知道是否必须显示它）。我在互联网上发现了如何使用类组件来做到这一点，而不是使用功能组件，你对如何实现这一点有任何想法吗？

这是我的实际代码的简化，以便重现我的问题（我删除了所有无用的代码）。

应用程序.js：

function App() {
  return (
    <div className="App">
        <Header />
        <div>
            <LateralMenu />
        </div>
    </div>
  );
}

标头组件：

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    function changeLateralMenu() {
        setLateralIsOpen(!lateralIsOpen);
    }

    return (
        <header>
            <div onClick={ changeLateralMenu }>
        </header>
    );
}

和横向菜单组件：

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    return (
        <section>
            { lateralIsOpen ? "open" : "closed" }
        </section>
    );
}

我尝试（但可能不正确）在 App 组件中声明 lateralIsOpen 状态并通过道具将其发送给我的子组件（Header 和 LateralMenu）。

我还尝试查看非常相似的this question（和其他一些），但看不出如何在我的案例中应用它，因为（据我所知）他在父组件中使用了一个按钮，它改变了state 在父组件中，然后通过道具将其发送给孩子......在我的例子中，切换它的按钮已经在孩子中。

【问题讨论】：

标签： reactjs react-hooks web-component

【解决方案1】：

我建议您将状态从LateralMenu 移到父级（App），然后通过切换函数到Header 来切换它。

export default function App() {
  const [lateralIsOpen, setLateralIsOpen] = useState(true);

  return (
    <div className="App">
      <Header toggleLateral={() => setLateralIsOpen((prev) => !prev)} />
      <div>
        <LateralMenu isOpen={lateralIsOpen} />
      </div>
    </div>
  );
}

function Header({ toggleLateral }) {
  function changeLateralMenu() {
    toggleLateral();
  }

  return (
    <header>
      <div onClick={changeLateralMenu}>click</div>
    </header>
  );
}

function LateralMenu({ isOpen }) {
  return <section>lateral is {isOpen ? 'open' : 'closed'}</section>;
}

密码箱：https://codesandbox.io/s/eager-heyrovsky-z75njd

【讨论】：