如何在Chakra Tabs中通过Props传递子组件实现可扩展导航？

你可以通过定义标签页配置数组的方式，实现只维护一份配置就能同时生成Tab标题和对应TabPanel内容，大幅提升可扩展性和可维护性。

实现步骤 #

1. 定义标签页配置
   把每个标签页的标题和对应组件整理成数组，有两种常见方式：

   • 方式一：直接声明标题与组件的映射

     const tabConfig = [
       { title: 'Report', component: <Report /> },
       { title: 'FoodItems', component: <FoodItems /> },
       { title: 'Incident', component: <Incident /> },
       { title: 'FormSubmit', component: <SubmitReport /> },
     ];
     

   • 方式二：给组件添加静态title属性（更优雅的模块化方式）
     先给每个组件添加静态title：

     // 在Report组件文件中
     export function Report() {
       // 组件内容
     }
     Report.title = 'Report';
     
     // 同理给FoodItems、Incident、SubmitReport添加静态title
     

     然后配置数组直接传入组件：

     const tabConfig = [Report, FoodItems, Incident, SubmitReport];
     

2. 遍历配置生成Tabs
   在TabNav组件中遍历配置数组，自动生成TabList和TabPanels：

   import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
   import { Report, FoodItems, Incident, SubmitReport } from './your-components-path';
   
   // 选择上面的其中一种配置方式
   const tabConfig = [
     { title: 'Report', component: <Report /> },
     { title: 'FoodItems', component: <FoodItems /> },
     { title: 'Incident', component: <Incident /> },
     { title: 'FormSubmit', component: <SubmitReport /> },
   ];
   
   function TabNav() {
     return (
       <Tabs variant='soft-rounded' colorScheme='green'>
         <TabList>
           {/* 遍历生成Tab标题 */}
           {tabConfig.map((tab, index) => (
             <Tab key={index}>{tab.title}</Tab>
           ))}
           {/* 如果用方式二，替换为：
           {tabConfig.map((Component, index) => (
             <Tab key={index}>{Component.title}</Tab>
           ))}
           */}
         </TabList>
         <TabPanels>
           {/* 遍历生成TabPanel内容 */}
           {tabConfig.map((tab, index) => (
             <TabPanel key={index}>{tab.component}</TabPanel>
           ))}
           {/* 如果用方式二，替换为：
           {tabConfig.map((Component, index) => (
             <TabPanel key={index}>
               <Component />
             </TabPanel>
           ))}
           */}
         </TabPanels>
       </Tabs>
     );
   }
   
   export default TabNav;
   

优势说明 #

• 可扩展性：新增标签页只需要在tabConfig数组中添加一项，无需修改Tabs的结构代码
• 可维护性：标题与组件的对应关系集中管理，避免分散在多处导致的不一致
• 模块化：如果使用组件静态title的方式，组件的元信息（标题）和组件本身绑定，更符合模块化设计

内容的提问来源于stack exchange，提问作者Knut Edvard Kjersem