如何通过NavBar.js中的按钮切换SideMenu.js内的Drawer Menu

实现方案 #

你需要通过状态提升的方式实现跨组件状态同步，把控制Drawer展开/收起的状态从SideMenu内部提取到两个组件的公共父组件中统一管理，再通过props把状态和修改方法分别透传给两个子组件即可，具体实现步骤如下：

步骤1：改造公共父组件 #

找到同时渲染NavBar和SideMenu的父组件（通常是App.js），新增Drawer控制状态和切换方法：

import React, { useState } from 'react'
import NavBar from './NavBar'
import SideMenu from './SideMenu'

const App = () => {
  // 原SideMenu内部的expanded状态提升到父组件
  const [drawerExpanded, setDrawerExpanded] = useState(true)
  // 通用切换方法
  const toggleDrawer = () => setDrawerExpanded(prev => !prev)

  return (
    <div>
      {/* 给NavBar传递切换方法 */}
      <NavBar toggleDrawer={toggleDrawer} />
      {/* 给SideMenu传递状态和切换方法 */}
      <SideMenu expanded={drawerExpanded} toggleDrawer={toggleDrawer} />
      {/* 其余业务代码保持不变 */}
    </div>
  )
}

export default App

步骤2：修改NavBar.js #

接收父组件传递的切换方法，绑定到按钮点击事件：

const NavBar = ({ toggleDrawer }) => {
    return (
         <AppBar>
           <AppBarSection>
             <button onClick={toggleDrawer}></button>
           </AppBarSection>
         </AppBar>
    );
};

export default NavBar;

步骤3：修改SideMenu.js #

删除内部的expanded本地状态，改用props传入的状态和切换方法，原有内置按钮逻辑复用同一个切换方法：

const SideMenu = (props) => {
  // 从props中取出状态和方法，删掉原来的本地useState定义
  const { expanded, toggleDrawer, history } = props

  const onSelect = (e) => {
    history.push(e.itemTarget.props.route);
  };

  const setSelectedItem = (pathName) => {
    let currentPath = items.find((item) => item.route === pathName);
    // 新增可选链避免无匹配路径时报错
    if (currentPath?.text) {
      return currentPath.text;
    }
  };

  return ( 
    <>
      <Drawer expanded={expanded} position='start' mode='push' mini={true} items={items.map((item, index) => 
        ({ ...item, selected: index === setSelectedItem }))} onSelect={onSelect}>
        <DrawerContent>
          <button className="k-button" onClick={toggleDrawer}>Toggle the DrawerMenu</button>
        </DrawerContent>
      </Drawer>
    </>
  );
};

export default withRouter(SideMenu);

如果你的组件嵌套层级较深，不想逐层透传props，也可以改用Context API或轻量状态管理工具实现，不过当前场景下状态提升是成本最低、逻辑最清晰的实现方式。

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