时间戳

首页 > 解决方案 > 材料ui芯片在循环内不起作用

reactjs - 材料ui芯片在循环内不起作用

问题描述

我正在尝试使用 material-ui 中的芯片组件。

当我单独使用它时它可以工作，但是当我使用循环（map）渲染它时，我得到了这个错误：

警告：失败的道具类型：children不支持该属性。请删除它。在 Chip（由 WithStyles(Chip) 创建）

这是我的渲染方法的一个例子：

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip key={index}>{e}</Chip>)}
        </div>
    );
}

来自关于儿童的官方 Material-ui 文档：

不支持此属性。如果需要更改子结构，请使用组件属性。

但是在我的示例中，我没有使用 child 道具，我的代码有什么问题？

标签： reactjsmaterial-ui

解决方案

您e作为孩子发送到芯片组件。

如果你想显示数组元素 ( e) 的文本，你应该通过labelprop 发送它。

这应该为您完成工作：

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip label={e} key={index} />)}
        </div>
    );
}

推荐阅读