React中如何实现父子组件传值以控制侧边栏开关状态？

React遵循单向数据流规则，状态定义在哪个组件，修改逻辑就应该收拢在哪个组件。你的场景里侧边栏开关状态由Topbar父组件管控，只需要把关闭侧边栏的回调函数通过props传递给Sidebar子组件，子组件点击关闭按钮时调用这个回调即可，不需要额外引入第三方依赖。

第一步：改造父组件 topbar.tsx #

首先在父组件内明确定义侧边栏的开关状态、打开/关闭方法，再把关闭方法通过props传给嵌套的Sidebar组件：

import { useState } from 'react'
import Sidebar from './sidebar'
// 按你项目实际路径引入Drawer、顶部栏按钮依赖
import Drawer from '对应Drawer组件引入路径'
import Button from 'react-bootstrap/Button'

export default function Topbar() {
  // 定义侧边栏开关状态，默认关闭
  const [isOpen, setIsOpen] = useState(false)

  // 打开侧边栏方法，绑定给顶部栏的打开按钮
  const handleOpenSidebar = () => setIsOpen(true)
  // 关闭侧边栏方法，同时给Drawer遮罩点击、子组件关闭按钮共用
  const handleCloseSidebar = () => setIsOpen(false)

  return (
    <>
      {/* 顶部栏原有业务内容 */}
      <div className="topbar-wrapper">
        {/* 你的其他顶部栏元素 */}
        <Button onClick={handleOpenSidebar}>打开侧边栏</Button>
      </div>

      <Drawer
        open={isOpen}
        onClose={handleCloseSidebar}
      >
        {/* 把关闭回调作为prop传给子组件 */}
        <Sidebar onClose={handleCloseSidebar} />
      </Drawer>
    </>
  )
}

第二步：改造子组件 sidebar.tsx #

接收父组件传递的onClose回调，绑定到内置CloseButton的点击事件上：

import CloseButton from 'react-bootstrap/CloseButton';

// 从props中解构拿到父组件传的关闭方法
export default function Sidebar({ onClose }) {
    return (
        <div className="sidebar-container">
          {/* 侧边栏其他导航、内容元素 */}
          <CloseButton onClick={onClose} />
        </div>
    )
}

注意事项 #

• 不要在子组件内直接修改父组件定义的isOpen状态，所有状态变更都要通过父组件传递的方法触发，避免数据流混乱，后续排查问题也更方便。
• 这种props传参的方式完全能覆盖直接父子组件的通信需求，如果后续嵌套层级变深（比如Sidebar里还有多层子组件需要触发侧边栏关闭），再考虑用Context或者状态管理库即可，当前场景不需要过度设计。

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