为啥当我使用 .map 而不是硬编码来动态填充内容时，Material UI 选项卡停止工作？

Posted 2023-02-14

【中文标题】为啥当我使用 .map 而不是硬编码来动态填充内容时，Material UI 选项卡停止工作？

【英文标题】：Why do Material UI tabs stop working when I use a .map to populate the content dynamically instead of hard coding?为什么当我使用 .map 而不是硬编码来动态填充内容时，Material UI 选项卡停止工作？

【发布时间】：2021-03-19 16:00:18

【问题描述】：

我已经通过对内容进行硬编码成功地实现了 Material UI 的选项卡，但是当我尝试使用 .map 函数制作我的硬编码选项卡以从数据源（简单的 json）填充内容时，它不再有效.谁能明白为什么？我所做的唯一更改是对下面的 MyTabs 组件，其中现在有两个 .map 函数，而不是硬编码的选项卡。

非常感谢您的帮助！

这是我的数据：

export const TabsData = [
  
    tabTitle: 'Tab 1',
    tabContent: 'Hello 1',
  ,
  
    tabTitle: 'Tab 2',
    tabContent: 'Hello 2',
  ,
  
    tabTitle: 'Tab 3',
    tabContent: 'Hello 3',
  ,
];

这是我的 MyTabs 组件：

import React,  useState  from 'react';

// Material UI
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

// Data
import  TabsData  from '../../page-templates/full-page-with-tabs/FullPageWithTabsData';

//Components
import TabContentPanel from '../tabs/tab-content-panel/TabContentPanel';

const MyTabs = () => 
  const classes = useStyles();
  const initialTabIndex = 0;
  const [value, setValue] = useState(initialTabIndex);

  const handleChange = (event, newValue) => 
    setValue(newValue);
  ;
  return (
    <>
     <Tabs
       value=value
       onChange=handleChange
       aria-label=""
       className=classes.tabHeight
       classes= indicator: classes.indicator 
     >
      TabsData.map((tabInfo, index) => (
        <>
         <Tab
            label=tabInfo.tabTitle
            id=`simple-tab-$index`
            ariaControls=`simple-tabpanel-$index`
         />
        </>
       ))
    </Tabs>
    TabsData.map((tabInfo, index) => (
        <TabContentPanel value=value index=index>
           tabInfo.tabContent
        </TabContentPanel>
    ))
    </>
  );
;

export default MyTabs;

这里是 TabsPanel 组件：

import React from 'react';
import PropTypes from 'prop-types';

// Material UI
import  Box  from '@material-ui/core';

function TabContentPanel(props) 
  const  children, value, index, ...other  = props;
  const classes = useStyles();
  return (
    <div
      role="tabpanel"
      hidden=value !== index
      id=`simple-tabpanel-$index`
      aria-labelledby=`simple-tab-$index`
      ...other
    >
      value === index && <Box className=classes.contentContainer>children</Box>
    </div>
  );


TabContentPanel.propTypes = 
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
;

export default TabContentPanel;

【参考方案1】：

它不起作用，因为您在 Tabs 组件中添加了一些额外的 Fragments（<> 和 </>），而 Tabs 组件不接受 Fragment 作为孩子：

如果您删除它们，它将按预期工作：

TabsData.map((tabInfo, index) => (
  <Tab
    label=tabInfo.tabTitle
    id=`simple-tab-$index`
    key=tabInfo.tabTitle
    ariaControls=`simple-tabpanel-$index`
  />
))

如果您创建元素数组，请使用具有唯一 ID 的 key 属性。 Each child in a list should have a unique "key" prop.

【讨论】：

哇！这现在完美无缺！非常感谢您的帮助以及包含密钥的其他建议。非常感谢，并节省了我浪费大量时间来试图弄清楚它！ :)