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

Question

我已经通过对内容进行硬编码成功地实现了 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;

Answer 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.