我无法使“标签”标签链接到右侧的“标签面板”。我使用的是实质性UI,文档尚不清楚如何处理任何数据。当我单击第一个标签时,我希望ID为1的数据显示在选项卡上。但是,所有选项卡中都没有显示请求的项目。
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`${index}`}
aria-labelledby={`${index}`}
{...other}
>
<Box p={3}>
<Typography>{value}</Typography>
</Box>
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `${index}`,
'aria-controls': `${index}`,
};
}
function Jobs(props) {
...
const tabClasses = tabStyles();
...
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
...
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
{props.jobs.map(e => (
<Tab label={e.description} {...a11yProps(e.id)} />
))}
</Tabs>
</AppBar>
{props.jobs.map(e => (
<TabPanel value={e.role} index={e.id}>
{e.role}
</TabPanel>
))}
...
);
}
...