React中MUI X Data Grid行内编辑删除按钮无法渲染问题

你现在的问题是把React组件直接作为行数据的字段值，Data Grid会将这个React元素对象转为字符串，所以显示[object object]。正确的做法是利用Data Grid列配置的render属性来渲染自定义组件，而非把组件塞进行数据里。

修改步骤： #

• 移除行数据中的组件字段：无需在bodyData里添加edit和delete字段，保持原有rows数据即可。
• 给列配置添加render函数：在columns数组的edit和delete列中，通过render方法返回对应的IconButton组件，同时可通过参数获取当前行数据。

修改后的完整代码： #

import { IconButton } from '@material-ui/core';
import React 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,
      // 渲染编辑按钮
      render: (params) => (
        <IconButton
          style={{ padding: "8px" }}
          onClick={(e) => {
            e.stopPropagation(); // 阻止触发行点击事件
            alert(`编辑ID: ${params.row.id}`);
          }}
          id={`a_${params.row.id}`}
        >
          <EditIcon style={{ fontSize: "16px" }} />
        </IconButton>
      )
    },
    { 
      field: 'delete', 
      headerName: ' ', 
      width: 130, 
      disableColumnMenu: true, 
      disableColumnFilter: true, 
      disableColumnSelector: true, 
      sortable: false,
      // 渲染删除按钮
      render: (params) => (
        <IconButton
          style={{ padding: "8px" }}
          onClick={(e) => {
            e.stopPropagation(); // 阻止触发行点击事件
            alert(`删除ID: ${params.row.id}`);
          }}
          id={`b_${params.row.id}`}
        >
          <DeleteOutlineIcon style={{ fontSize: "20px" }} />
        </IconButton>
      )
    }
  ];

  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 },
  ];
  
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
}

关键说明： #

• render函数的参数params包含当前行的所有数据（params.row），可用来获取行ID等信息，方便后续编辑、删除逻辑。
• 保留e.stopPropagation()可避免点击按钮时触发Data Grid的行选中或行点击事件，提升交互体验。
• 无需再通过map生成bodyData，直接使用原始rows数据即可，减少不必要的内存开销。

内容的提问来源于stack exchange，提问作者vikas dhiman