如何解决将按钮映射到物料ui表的行
我正在使用数据表,我必须像这样定义行和列(我使用map将按钮添加到我从外部获取的每一行数据中)
const finalData = data.map(({id,first_name,last_name,email,phone,attorney,leadType,date}) => ({id,date,action: <button>button</button>}))
const rows = finalData;
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
但是在我的行中我没有按钮,而是得到了[object object]我该如何解决?
解决方法
假设您要花费DataGrid from material-ui
,似乎您不能在映射行时仅使用JSX作为键值来做到这一点。您必须使用称为renderCell()
的东西来包含自定义JSX。
例如,
您可以使用:-
{
field: 'action',headerName: 'Action',renderCell: () => (
<button>
Content
</button>
),},
作为列条目之一,以使用所需的按钮呈现单独的“操作”列。
有关更多信息,请参考以下内容:-
https://material-ui.com/components/data-grid/rendering/#components
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。