时间戳

首页 > 解决方案 > React Material-Table - 如何在从获取的数组呈现的单元格之间添加逗号？

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

问题描述

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

当前行为图

我想要达到的目标

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

标签： arraysreactjsmaterial-uimaterial-table

解决方案

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

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

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

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

然后将其输入材料表单元格。你可以在这里查看一个简单的例子：https ://codesandbox.io/s/basictable-material-demo-forked-19c9z?file=/demo.js

推荐阅读