将按钮映射到材质 ui-table 的行答案

【问题标题】：mapping a button into material ui-table's row将按钮映射到材质 ui-table 的行
【发布时间】：2021-01-27 11:18:47
【问题描述】：

我正在使用数据表，我必须像这样定义行和列（我使用映射将按钮添加到我从外部获取的每一行数据中）

const finalData = data.map(({id, first_name, last_name, email, phone, attorney, leadType, date}) => ({id, first_name, last_name, email, phone, attorney, leadType, date, action: <button>button</button>}))
const rows = finalData;

<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

但是在我的行中，我没有得到按钮，而是得到 [object object] 我该如何解决这个问题？

【问题讨论】：

什么结果console.log(finalData)？
是的，我不能将按钮元素保留在对象中，我该如何解决这个问题？

标签： reactjs material-ui mapping

【解决方案1】：

假设您正在使用 DataGrid from material-ui，您似乎无法在映射行时仅使用 JSX 作为键值。您必须使用 renderCell() 来包含自定义 JSX。

例如，

你可以使用：-

{
    field: 'action',
    headerName: 'Action',
    renderCell: () => (
      <button>
        Content
      </button>
    ),
  },

作为列条目之一，使用您所需的按钮呈现单独的操作列。

【讨论】：

他们在谈论DataGrid
感谢@NearHuscarl 提供的信息。我已经相应地更新了答案。