可以在材料表中渲染材料元素吗？答案

【问题标题】：Possible to render Material elements within material-table?可以在材料表中渲染材料元素吗？
【发布时间】：2020-06-02 15:41:35
【问题描述】：

我正在为我的应用程序开发数据显示，并且一直在研究基于 Material UI 构建的不同可用数据表组件。我想知道material-table 是否可以在表格列之一中呈现 Material UI <Chip> 组件。我尝试了我认为最有意义的尝试，但没有奏效。我的尝试：

const test = () => {
    return (
      <div>
        <Chip>Test</Chip>
        <Chip>Another Test</Chip>
      </div>
    )
  }

然后尝试渲染它：

<MaterialTable
   columns={[
      { title: 'Project Types', field: 'types' }
   ]}
   data={[
      { types: test },
   ]}
/>

我可以做些什么来在我的材料表中渲染这些芯片？

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

这样的？查看MaterialTable的custom column rendering section

<MaterialTable
  columns={[
    {
      title: 'Project Types',
      field: 'types',
      render: rowData => (
        <div>
          {rowData.types.map(type => (
            <Chip key={type} label={type}/>
          ))}
        </div>
      ),
    },
  ]}
/>;

【讨论】：

您应该将<Chip key={type.id}>{type.name}</Chip> 此处的name 和id 参数替换为您存储在类型数组中的参数。因此，如果类型有title 而不是name，则它应该是{type.title}。尝试控制台记录类型数组具有的字段。如果它只是一个普通的字符串数组，你应该简单地将它输出为{type}
我很傻。我忘记了组件使用 label={} 来实际显示文本，并且它们是自闭合元素。感谢您的帮助。我已排队对您的解决方案进行修改，以反映语法正确的代码。非常感谢！
当然，如果您的类型是唯一的，请不要忘记添加key={type}，这样您就不会在控制台输出中收到警告。