Material UI-芯片阵列

Question

我正在为ReactJS组件编写一些代码，使其具有芯片阵列。我希望每个芯片都有独特的风格，所以我为每个芯片设置了一个makeStyles类。我很难弄清楚如何为每个标签更改类。这就是我目前所得到的：

const classes = useStyles();
const [chipData, setChipData] = React.useState([
{ key: 0, label: 'Heating' },
{ key: 1, label: 'Printing' },
{ key: 2, label: 'Resetting' },
{ key: 3, label: 'Idle' },
{ key: 4, label: 'Suspended' },
{ key: 5, label: 'Suspend in Progress' },
{ key: 6, label: 'Attention - Printer Connection Lost' },
{ key: 7, label: 'Attention - Filament Out' },
{ key: 8, label: 'Attention - Cooldown Failed' },
]);

return (
<Box display="flex" flexDirection="row" alignItems="flex-start" className={classes.container}>
{chipData.map((data) => {

return (
<div classes={classes.chipContainer}>
<li key={data.key}>
<Chip
label={data.label}
if (label === 'Heating') {
className={classes.heatingTag}
}
/>
</li>
</div>
);
})}
</Box>
);
}
export default PrinterStatusTags

因此，在chip元素中，我有一个if语句，用于根据标签分配特定的类。我的计划是对每个标签都有一个if语句，但我得到了以下错误：

Parsing error: Unexpected token

有什么想法我可以根据芯片分配一个班级吗？

Answer 1

更新的答案

我会做两件事：

1. 为每个芯片添加一个新的type属性
2. 创建从类型(在第1点(到类的映射器

const classesMapper = {
first: classes.firstClass,
second: classes.secondClass
// ...
};
const [chipData, setChipData] = React.useState([
{ key: 0, label: 'Heating', type: 'first' },
{ key: 1, label: 'Printing', type: 'seocnd' },
// ....
]);

在你有了每个芯片与其类型之间的映射之后。只需渲染即可：

return (
<Box display="flex" flexDirection="row" alignItems="flex-start" className={classes.container}>
{chipData.map((data) => {
return (
<div classes={classes.chipContainer}>
<li key={data.key}>
<Chip
label={data.label}
className={classesMapper[data.type]} />
</li>
</div>
);
})}
</Box>
);

老答案

你应该写一点不同的代码：

1. 使用className属性，而不是属性类(也不是类(
2. 在className属性内设置条件。请注意，有更好的方法来设置正确的类，但对于您的情况，这就足够了

这是应该是的代码：

<div classeName={classes.chipContainer}>
<li key={data.key}>
<Chip label={data.label} className={ label ==== 'Heating' && classes.heatingTag}/>
</li>
</div>