当我使用 .map 动态填充内容而不是硬编码时,为什么 Material UI 选项卡停止工作?
Why do Material UI tabs stop working when I use a .map to populate the content dynamically instead of hard coding?
我已经通过对内容进行硬编码成功实现了 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;
它不起作用,因为您在 Tabs
组件和 Tabs
组件中添加了一些额外的 Fragment
s(<>
和 </>
)不接受 Fragment
作为 child:
如果删除它们,它将按预期工作:
{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.
我已经通过对内容进行硬编码成功实现了 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;
它不起作用,因为您在 Tabs
组件和 Tabs
组件中添加了一些额外的 Fragment
s(<>
和 </>
)不接受 Fragment
作为 child:
如果删除它们,它将按预期工作:
{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.