如何基于tabNames数组动态创建并渲染React Material UI Tab组件

原有实现的问题 #

你的原有思路错误地使用字符串拼接JSX结构，在React中JSX是可直接传递存储的React元素对象，不需要做字符串拼接。同时原有逻辑还存在Tab选中态判断错误、TabPanel索引传值固定为0的问题，会导致Tab切换功能异常。

正确实现代码 #

const buildTabs = () => {
  // 生成所有Tab选项
  const tabList = tabNames.map((tabName, index) => (
    <GenericsTab
      key={tabName} // 若tabName存在重复则换用index作为key
      label={tabName}
      className={selectedTab === index ? '选中态自定义类名' : ''}
    />
  ));

  // 生成所有Tab对应的内容面板
  const tabPanelList = tabNames.map((_, index) => {
    // 此处替换为每个Tab对应的实际内容，可根据index匹配你自己的业务内容
    const currentTabContent = `对应Tab ${index} 的自定义内容`
    return tabPanelMarkup(index, currentTabContent)
  });

  // 直接返回完整组件结构
  return (
    <div className='page-content'>
      <MuiThemeProvider theme={kbTheme}>
        <GenericsTabs
          value={selectedTab}
          onChange={handleTabChange}
        >
          {tabList}
        </GenericsTabs>
        {tabPanelList}
      </MuiThemeProvider>
    </div>
  )
}

注意事项 #

• 循环生成的React元素必须添加key属性，优先使用唯一不变的业务值作为key（比如唯一的tabName），性能优于使用索引作为key
• 每个Tab的选中态需要判断当前索引是否等于选中的selectedTab，不要固定判断是否等于0
• 调用tabPanelMarkup时第一个参数要传入当前循环的索引，不要固定传0，否则Tab切换时内容面板不会正常显示/隐藏
• 如果你每个Tab的内容不是固定字符串，可提前定义一个和tabNames索引对应的内容数组，循环时根据索引取值传入即可

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