React布局组件中如何将侧边栏切换按钮移入Header组件

问题出在Header组件无法访问控制侧边栏状态的切换函数——原来的切换逻辑只在Layout组件里，移到Header后没有把触发状态变更的能力传递过去，按下面步骤改就行：

步骤1：从自定义Hook中取出切换函数 #

先在Layout组件里，从你的Script() Hook中解构出切换侧边栏状态的函数（假设Hook里已经实现了这个函数，叫toggleSidebar，如果没有的话得先在Hook里添加）：

const Layout = ({ children }) => {
  // 解构出isActive状态、切换函数toggleSidebar，以及原来的SidebarCollapse组件
  const { isActive, toggleSidebar, SidebarCollapse } = Script();
  console.log({ isActive });

  return (
    <>
      <div className="wrapper">
        <Sidebar handleToggle={isActive} />
        <div id="body" className={isActive ? "active" : null}>
          {/* 移除原来的SidebarCollapse按钮，因为要移到Header里 */}
          {/* 把toggleSidebar作为props传给Header */}
          <Header toggleSidebar={toggleSidebar} />
          {children}
        </div>
      </div>
      <Footer />
    </>
  );
};

步骤2：在Header组件中接收并使用切换函数 #

修改Header组件，通过props拿到toggleSidebar，然后给按钮绑定点击事件：

const Header = ({ toggleSidebar }) => {
  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-white bg-white">
        {/* 添加切换按钮，点击时调用toggleSidebar */}
        <button type="button" id="sidebarCollapse" className="btn btn-light" onClick={toggleSidebar}>
          <i className="bi bi-list"></i><span></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="nav navbar-nav ms-auto">
            <li className="nav-item">
              <span className="nav-link d-none d-lg-inline-block">
                <i className="bi bi-building"></i>
              </span>
            </li>
            <li className="nav-item dropdown">
              <div className="nav-dropdown">
                <a
                  href="/#"
                  id="nav2"
                  className="nav-item nav-link dropdown-toggle text-secondary"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  <i className="bi bi-person-circle"></i>{" "}
                  <i className="bi bi-caret-down-fill"></i>
                </a>
                <div className="dropdown-menu dropdown-menu-end nav-link-menu">
                  <ul className="nav-list">
                    <li>
                      <a href="/#" className="dropdown-item">
                        <i className="bi bi-credit-card-2-front"></i> Modifica
                        dati
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </>
  );
};

补充：如果Script Hook里没有切换函数 #

要是你的Script() Hook还没暴露切换函数，得先修改Hook，把状态切换逻辑return出来：

import { useState } from 'react';

const Script = () => {
  const [isActive, setIsActive] = useState(false);
  
  // 实现切换函数
  const toggleSidebar = () => {
    setIsActive(prev => !prev);
  };

  // 原来的SidebarCollapse组件可以保留（可选）
  const SidebarCollapse = () => (
    <button onClick={toggleSidebar}>Toggle Sidebar</button>
  );

  return { isActive, toggleSidebar, SidebarCollapse };
};

export default Script;

核心逻辑就是把控制状态的函数通过props从父组件（Layout）传递给子组件（Header），让Header能触发状态变更，从而控制Sidebar和body的active类切换。

内容的提问来源于stack exchange，提问作者GNetcoming