时间戳

首页 > 解决方案 > 如何使用 React 钩子来确定侧边栏是否应该显示？

reactjs - 如何使用 React 钩子来确定侧边栏是否应该显示？

问题描述

我已经阅读了一些关于 React Hooks 的介绍，并想在标题组件中制作一个带有按钮的简单应用程序，该按钮确定主应用程序是否应该显示侧边栏。该按钮在标题中设置变量showSidebar，我想在我的主要组件中再次读取它。为简洁起见，删除了实际显示侧边栏的代码。

这是index.js：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import Header from "./header";
import "./styles.css";

function App() {
  const [showSidebar, setShowSidebar] = useState(true);

  return (
    <div className="App">
      <Header />
      <h1>Sidebar toggler</h1>

      <p>
        Should I show sidebar? <b>{showSidebar.toString()}</b>
      </p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是header.js：

import React, { useState } from "react";
export default function Header() {
  const [showSideBar, setShowSidebar] = useState(true);
  const toggleSidebar = () => setShowSidebar(!showSideBar);

  return (
    <header>
      Button in header toggles sidebar:
      <button onClick={() => toggleSidebar()}>
        Toggle sidebar (state: {showSideBar.toString()})
      </button>
    </header>
  );
}

我是 React 新手，但不明白为什么 index.js 中的状态没有更新？我还用代码制作了一个CodeSandbox。

标签： reactjsreact-hooks

解决方案

useStateis 存储本地状态，为了进行比较，您可以将其视为类似于setState在类组件中（尽管实际上它们并不完全等效）。因此，设置setShowSidebar不会App反映与设置相同的值，Header反之亦然。

Header如果它只是改变外部组件的状态，它看起来不需要任何形式的本地状态，您可以传入事件处理程序并且任何相关的状态Header需要作为道具代替

index.js

function App() {
  const [showSidebar, setShowSidebar] = useState(true);
  const toggleSidebar = useCallback(() => setShowSidebar(value => !value));

  return (
    <div className="App">
      <Header onClick={toggleSidebar} showSideBar={showSidebar} />
      <h1>Sidebar toggler</h1>
      <p>
        Should I show sidebar? <b>{showSidebar.toString()}</b>
      </p>
    </div>
  );
}

header.js

export default function Header(props) {
  return (
    <header>
      Button in header toggles sidebar:
      <button onClick={props.onClick}>
        Toggle sidebar (state: {props.showSideBar.toString()})
      </button>
    </header>
  );
}

推荐阅读