React TypeScript中如何在两个组件间共享侧边栏展开/收起状态？

不需要把两个组件合并，保持组件职责分离更利于维护和复用。最直接的方案是状态提升——把展开/收起的状态放在两个组件的共同父组件中，再把状态和切换方法传递给需要的子组件。

具体实现步骤： #

1. 在共同父组件中管理状态
   看你的结构，Topbar和Sidebar的共同父是App组件，在这里用useState维护展开状态：

   import { useState } from 'react';
   import Topbar from './Topbar';
   import Sidebar from './Sidebar';
   
   const App = () => {
     // 控制展开/收起的状态，默认展开
     const [isExpanded, setIsExpanded] = useState<boolean>(true);
   
     // 切换状态的方法
     const toggleExpand = () => {
       setIsExpanded(prev => !prev);
     };
   
     return (
       <div className="App">
         <div className='Root-Container'>
           {/* 把状态和切换方法传给Topbar */}
           <Topbar isExpanded={isExpanded} onToggle={toggleExpand} />
           <div className='Sub-Pannels-Root'>
             <div className='Side-Bar-Root'>
               {/* 把状态传给Sidebar */}
               <Sidebar isExpanded={isExpanded} />
             </div>
             <div className='Main-Pannel-Container-Root'>
             </div>
           </div>
         </div>
       </div>
     );
   };
   
   export default App;
   

2. 修改Topbar组件接收props
   Topbar需要接收isExpanded状态来控制左侧区域显示，以及onToggle方法绑定按钮点击事件：

   // Topbar.tsx
   interface TopbarProps {
     isExpanded: boolean;
     onToggle: () => void;
   }
   
   const Topbar = ({ isExpanded, onToggle }: TopbarProps) => {
     return (
       <div className="Topbar">
         {/* 左侧区域：根据isExpanded控制显示 */}
         <div className={`Topbar-Left ${isExpanded ? 'expanded' : 'collapsed'}`}>
           {/* 你的若干元素 */}
         </div>
         {/* 切换按钮 */}
         <button onClick={onToggle}>
           {isExpanded ? '收起' : '展开'}
         </button>
       </div>
     );
   };
   
   export default Topbar;
   

3. 修改Sidebar组件接收props
   Sidebar根据isExpanded状态控制自身收起/展开：

   // Sidebar.tsx
   interface SidebarProps {
     isExpanded: boolean;
   }
   
   const Sidebar = ({ isExpanded }: SidebarProps) => {
     return (
       <div className={`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`}>
         {/* 侧边栏内容 */}
       </div>
     );
   };
   
   export default Sidebar;
   

4. 添加CSS样式控制收起/展开
   通过CSS类控制元素宽度或显示：

   .Topbar-Left.expanded {
     width: 200px;
     /* 展开时的样式 */
   }
   
   .Topbar-Left.collapsed {
     width: 0;
     overflow: hidden;
     /* 收起时的样式 */
   }
   
   .Sidebar.expanded {
     width: 250px;
     /* 展开时的样式 */
   }
   
   .Sidebar.collapsed {
     width: 60px;
     /* 收起时只显示图标之类的样式 */
   }
   

可选进阶方案 #

如果后续多个组件需要用到这个展开状态，可以用React Context封装状态，避免多层props传递。但当前场景下，状态提升已经足够简洁高效。

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