MUIX数据网格不显示一排中的编辑和删除按钮reactjs

Question

i我无法在行数据中渲染自定义代码，并在行中删除。我使用MUI DataTables传递列和行。但是，对于行数据很好，但对于编辑和删除[对象对象]而不是呈现组件。

贝洛是代码

在地图函数中，我正在添加编辑和删除代码bu，它显示我像[对象对象]而不是组件。在这里，我添加了编辑和删除以使用图标显示在行中。

import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Paper } from '@material-ui/core';
import React, { useState } from 'react';
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
import EditIcon from "@material-ui/icons/Edit";
import { DataGrid } from "@material-ui/data-grid";



export const DataTable = () => {
  const columns = [
    { field: 'id', headerName: '# ID', width: 70, disableColumnMenu: true, disableColumnFilter: true, disableColumnSelector: true, sortable: false },
    { field: 'name', headerName: 'Name', width: 130, disableColumnMenu: true, disableColumnFilter: true, disableColumnSelector: true, sortable: false },
    { field: 'edit', headerName: ' ', width: 130 , disableColumnMenu: true, disableColumnFilter: true, disableColumnSelector: true, sortable: false },
    { field: 'delete', headerName: ' ', width: 130, disableColumnMenu: true, disableColumnFilter: true, disableColumnSelector: true, sortable: false }
  ];
  const rows = [
    { id: 1, name: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, name: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, name: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, name: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, name: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, name: 'Melisandre', firstName: null, age: 150 },
    { id: 7, name: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, name: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, name: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

  const bodyData = rows.map( ( row, index ) => {
    return {
      ...row,
      "edit": (<IconButton
      style={{ padding: "8px" }}
      onClick={(e) => {
        e.stopPropagation();
        alert("test")
      }}
      id={`a_${row.id}`}
    >
      <EditIcon style={{ fontSize: "16px" }} />
    </IconButton>),
    "delete": (<IconButton
      style={{ padding: "8px" }}
      onClick={(e) => {
        e.stopPropagation();
        alert("test")
      }}
      id={`b_${row.id}`}
    >
      <DeleteOutlineIcon style={{ fontSize: "20px" }} />
    </IconButton>)
  }});
  
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={bodyData}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
}

这不是正确的方法，请查看

Answer 1

是必须管理UI而不是行的列

const headers = columns.map( ( col ) => {
    return {
      field: col.field,
      headerName: col.headerName,
      width: col.width || "200",
      renderCell: cellRenderer,
      sortable: false,
    };
  });
const cellRenderer = (params) => {
  return params.value;
};

Answer 2

使用RenderCell并渲染自定义组件