时间戳

首页 > 解决方案 > 将按钮映射到材质 ui-table 的行

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

问题描述

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

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] 我该如何解决这个问题？

标签： reactjsmaterial-uimapping

解决方案

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

例如，

您可以使用 ：-

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

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

有关更多信息，请参阅以下内容：-

https://material-ui.com/components/data-grid/rendering/#components

推荐阅读