如何將 state 導出到 React 中的父功能組件？

Question

我正在制作響應式菜單側邊欄。 我想在側邊欄組件中使用 header 組件中的isOpen state。 我怎樣才能做到這一點？ 我搜索了如何將 props 從子組件傳遞到父組件，但我無法理解代碼，而且它似乎與我想做的不同。

應用程序.js

const App = (props) => {
    return (
        <div className="App">
            <Sidebar />
            <main>
                <Header username={props.username} />
                <Routes>
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/goods" element={<Goods />} />
                    <Route path="/sales" element={<Sales />} />
                    <Route path="/users" element={<Users />} />
                </Routes>
            </main>
        </div>
    );
};

側邊欄.js

const Sidebar = () => {
    const handleLogout = () => {
        localStorage.removeItem("token");
        window.location.href = "/";
    };
    return (
        <div className="sidebar">
            <aside id="menuOpen">
                <div className="sidebar-header">
                    <Link to="#">PLASTIQQQ.</Link>
                </div>
                <nav>
                    <ul>
                        <Link to={"/dashboard"} id={window.location.pathname === "/dashboard" ? "active" : ""}>
                            <MdDashboard /> Dashboard
                        </Link>
                        <Link to={"/goods"} id={window.location.pathname === "/goods" ? "active" : ""}>
                            <FiPackage /> Goods
                        </Link>
                        <Link to={"/sales"} id={window.location.pathname === "/sales" ? "active" : ""}>
                            <IoMdCart /> Sales
                        </Link>
                        <Link to={"/users"} id={window.location.pathname === "/users" ? "active" : ""}>
                            <FiUsers /> Users
                        </Link>
                    </ul>
                </nav>
                <div className="logout">
                    <button onClick={handleLogout}>
                        <RiLogoutBoxLine /> Logout
                    </button>
                </div>
            </aside>
        </div>
    );
};

header.js

const Header = (props) => {
    let [isOpen, setIsOpen] = useState(false);

    const menuOpen = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div className="header">
            <h1>Hello, {props.username}</h1>
            <div className="menu-bar-container">
                <div className="menu-bar" onClick={menuOpen}>
                    <span className={isOpen ? "open" : ""}></span>
                    <span></span>
                    <span className={isOpen ? "open" : ""}></span>
                </div>
            </div>
        </div>
    );
};

Answer 1

您可以向 headerComponent 提供一個名為onToggle的回調道具，它傳遞值的 state 並將其設置為父組件，父組件將其傳遞給側邊欄組件：

import { useState } from 'react';

const App = props => {
    const [isHeaderOpen, setIsHeaderOpen] = useState(false);
    return (
        <div className="App">
            <Sidebar isHeaderOpen={isHeaderOpen} />
            <main>
                <Header onToggle={setIsHeaderOpen} username={props.username} />
                <Routes>
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/goods" element={<Goods />} />
                    <Route path="/sales" element={<Sales />} />
                    <Route path="/users" element={<Users />} />
                </Routes>
            </main>
        </div>
    );
};

const Header = props => {
    let [isOpen, setIsOpen] = useState(false);

    const menuOpen = () => {
        props.onToggle(!isOpen);
        setIsOpen(!isOpen);
    };

    return (
        <div className="header">
            <h1>Hello, {props.username}</h1>
            <div className="menu-bar-container">
                <div className="menu-bar" onClick={menuOpen}>
                    <span className={isOpen ? 'open' : ''}></span>
                    <span></span>
                    <span className={isOpen ? 'open' : ''}></span>
                </div>
            </div>
        </div>
    );
};