如何在 React 中的 function 組件之間傳遞狀態

Question

我的導航欄組件有 2 個子組件。 每個組件都有自己的 state。 狀態在其組件內工作正常。 當 function 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 中傳遞。

導航欄.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;

漢堡包.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