reactjs - 为什么当我使用 .map 而不是硬编码来动态填充内容时,Material UI 选项卡停止工作?
问题描述
我已经通过对内容进行硬编码成功地实现了 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;
解决方案
它不起作用,因为您在组件中添加了一些额外Fragment
的 s ( <>
and </>
)Tabs
并且Tabs
组件不接受 aFragment
作为子组件:
如果您删除它们,它将按预期工作:
{TabsData.map((tabInfo, index) => (
<Tab
label={tabInfo.tabTitle}
id={`simple-tab-${index}`}
key={tabInfo.tabTitle}
ariaControls={`simple-tabpanel-${index}`}
/>
))}
key
如果您创建元素数组,请使用具有唯一 id 的道具。列表中的每个孩子都应该有一个唯一的“关键”道具。
推荐阅读
- python - gpu 利用率问题(nvidia-smi 打印出我正在使用 gpu 但任务管理器显示我没有使用 gpu)
- javascript - 我的提交按钮不保存来自 textarea 的文本
- python - 如何创建*10 矩阵?
- android - 如何将可跨度转换的粗斜体文本保存到 sqllite DB
- javascript - 如何从 url 请求运行 NodeJS 文件
- flutter - Flutter:如何将抽屉页眉宽度设置为最大?
- ruby-on-rails - 如何在 rails 资产管道中包含 javascript 文件?
- python - 获取元素硒python的标签
- javascript - 制作不和谐机器人时如何获取目标用户的标签?
- android - app:srcCompat 是否仍然需要最低 Android 支持 5.0?