如何在 React 中的函数组件之间传递状态

Question

我的导航栏组件有 2 个子组件。每个组件都有自己的状态。 状态在其组件内工作正常。当两个函数 onClick 都将被执行时，如何同时将两个状态从 false 更新为 true？

主要组件导航栏

import Hamburger from "./Hamburger";
import ListMenu from "./ListMenu";

const Navbar = () => {
  return (
    <div className="navContainer">
      <nav className="navigation">
        <div className="logo">LOGO</div>
        <ListMenu />
        <Hamburger />
      </nav>
    </div>
  );
};

ListMenu 组件

import React, { useState } from "react";

const ListMenu = () => {
  const [showMobileMenu, setShowMobileMenu] = useState(false);

  const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];

  const onClick = () => {
    if (window.innerWidth < 757) {
      setShowMobileMenu(!showMobileMenu);
    }
  };
  return (
  <ul className={`navList ${showMobileMenu ? "open" : ""}`}>
     {menu.map((item) => (
       <li key={item} className="listItem" onClick={onClick}>
         {item}
       </li>
     ))}
   </ul>
  );
};

export default ListMenu;

汉堡组件

import React, { useState } from "react";

const Hamburger = () => {
  const [navBarStatus, setNavBarStatus] = useState(false);

  const onClick = () => {
    if (window.innerWidth < 757) {
      setNavBarStatus(!navBarStatus);
    }
  };

  return (
    <div className="nav_bar">
      <div
        onClick={onClick}
        className={`hamburger ${navBarStatus ? "is-active" : ""}`}
      >
        <span className="line"></span>
        <span className="line"></span>
        <span className="line"></span>
      </div>
    </div>
  );
};

export default Hamburger;

Answer 1

将所有状态从子组件移动到父组件，并在props中传递。

Navbar.js

import React, { useState } from "react";

import Hamburger from "./Hamburger";
import ListMenu from "./ListMenu";

const Navbar = () => {
  const [showMobileMenu, setShowMobileMenu] = useState(false);    // here
  const [navBarStatus, setNavBarStatus] = useState(false);        // here

  return (
    <div className="navContainer">
      <nav className="navigation">
        <div className="logo">LOGO</div>
        <ListMenu
          showMobileMenu={showMobileMenu}                        // props
          setShowMobileMenu={setShowMobileMenu}                  // props
        />
        <Hamburger
          navBarStatus={navBarStatus}                            // props
          setNavBarStatus={setNavBarStatus}                      // props
        />
      </nav>
    </div>
  );
};

export default Navbar;

ListMenu.js

import React from "react";

// See props below showMobileMenu and setShowMobileMenu
const ListMenu = ({ showMobileMenu, setShowMobileMenu }) => { 
  const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];

  const onClick = () => {
    if (window.innerWidth < 757) {
      setShowMobileMenu(!showMobileMenu);
    }
  };
  return (
    <ul className={`navList ${showMobileMenu ? "open" : ""}`}>
      {menu.map(item => (
        <li key={item} className="listItem" onClick={onClick}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default ListMenu;

Hamburger.js

import React from "react";

// See props below navBarStatus and setNavBarStatus
const Hamburger = ({ navBarStatus, setNavBarStatus }) => {
  const onClick = () => {
    if (window.innerWidth < 757) {
      setNavBarStatus(!navBarStatus);
    }
  };

  return (
    <div className="nav_bar">
      <div
        onClick={onClick}
        className={`hamburger ${navBarStatus ? "is-active" : ""}`}
      >
        <span className="line" />
        <span className="line" />
        <span className="line" />
      </div>
    </div>
  );
};

export default Hamburger;

演示：Stackblitz