React Material-Table - 如何在从获取的数组呈现的单元格之间添加逗号？

Question

我正在使用 Material Table 来管理工作站。我收到的一些数据是数组，它们会自动迭代并显示在单元格中但没有逗号。

Current behavior picture

What I'm trying to achieve

我觉得重写整个单元格组件有点矫枉过正，我想避免修改获取的数组。有什么方法可以修改 Material Table 在“MTableCell”组件中完成的迭代吗？或者也许有一些更聪明的方法来做到这一点？

Answer 1

假设attribs是你的数据为数组（如图所示）：

const attribs = ['ATTRIBUTE1', 'ATTRIBUTE2', 'ATTRIBUTE3'];

您可以使用 reduce 将其转换为逗号分隔的字符串：

const separated = attribs.reduce((prev, current) => `${prev},${current}`);

然后将其输入 material table 单元格。您可以在此处查看一个简单示例：https://codesandbox.io/s/basictable-material-demo-forked-19c9z?file=/demo.js

React Material-Table - How can I add commas between cell that is rendered from fetched array?