reactjs - 动态定义 TabPanel 内的组件（material-ui、react）

Question

我正在从数组接收要呈现的选项卡的信息，例如：['general'，'whodas'，'tasks']。根据这些信息，我必须创建包含必须显示的组件的 TabPanel 标签。例如，一般来说，标签应该是这样的：

<TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
  <Dashboard></Dashboard>
</TabPanel>

我正在创建一个包含 elementIndex 和要呈现的组件的所有信息的数组，如下所示：

(4) [{…}, {…}, {…}, {…}]
0: {component: "dashboard", elementIndex: 0}
1: {component: "whodas", elementIndex: 1}
2: {component: "resources", elementIndex: 2}
3: {component: "tasks", elementIndex: 3}
length: 4
__proto__: Array(0)

然后尝试在返回中渲染它：

<Fragment>
          {tabsPanelHtml!== undefined ? tabsPanelHtml.map ((tab) =>{
            
            if(tab.component === 'dashboard') {
              return(
                <TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
                  <Dashboard></Dashboard>
                </TabPanel>
    
              )
            } else if (tab.component === 'whodas') {
              return(
                <TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
                  <WhoDas></WhoDas>
                </TabPanel>
    
              )
            } else if (tab.component === 'resources') {
              return(
                <TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
                  <ResourcesInfo></ResourcesInfo>
                </TabPanel>
    
              )
            } else if (tab.component === 'tasks') {
              return(
                <TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
                  <Tasks></Tasks>
                </TabPanel>
    
              )
            } else if (tab.component === 'newAdalmed') {
              return(
                <TabPanel  value={tab.elementIndex} index={tab.elementIndex}>
                  <NewAdalmed></NewAdalmed>
                </TabPanel>
    
              )
            }
          

          })

          : null}
        </Fragment>

但是，似乎没有什么可以渲染的：

我认为我的渲染方法有问题（惊喜）

标签： reactjstabsmaterial-ui