如何在 @mui/x-data-grid 表中显示图像？

Question

我是一个 React.js 初学者。当我尝试将图像头像添加到我的 MUI 表时，出现以下错误。“TypeError：params.rows 未定义”我将把我的代码放在下面。

import React from 'react'

导入“./userList.css”从'@mui/x-data-grid'导入{DataGrid}；

导出默认函数 UserList() {

const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'user', headerName: 'User', width: 200, renderCell: (params)=>{
      return (
        <div>
          <img src={params.rows.avatar} alt='' />
          {params.rows.username}
        </div>
      )
    } },
    { field: 'email', headerName: 'E-mail', width: 130 },
    {
      field: 'status',
      headerName: 'Status',
      width: 90,
    },
    {
      field: 'transaction',
      headerName: 'Transaction',
      width: 100,
    },
    
  ];
  
  const rows = [
    { id: 1, 
    username: 'Harry Potter', avatar:"https://assets.materialup.com/uploads/bebad102-7f40-4941-99cd-54366113003e/avatar-08.png", 
    email:"Harry@gmail.com", 
    status:"Active",
    transaction:"$120" 
    },];

return (
    <div className="userList">
        <DataGrid rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection />
    </div>
)

}

代码

Answer 1

我在您的代码和未使用的组件中发现了一些数据结构问题。

第一个是头像，可以使用MUI组件来设置，例如.. <Avatar> Avatar Component MUI

可以通过以下方式添加：

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

但要使用它，您当然必须导入它，因此，除了 之外DataGrid，您还导入该Avatar组件：

import Avatar from '@mui/material/Avatar';

通过对您对行所做的事情进行解释，就会出现问题。user因为您正在尝试将以下值呈现到列中：username和avatar。为了实现这一目标，您需要同时拥有它们。我拿了一把Datagrid小提琴，粘贴了你的代码并做了一些修复，在某种程度上你可以明白我的意思。

这是小提琴：DataGrid Text + Avatar 列示例

这里的小提琴中的代码也进行了一些修改。

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Avatar from "@mui/material/Avatar";

export default function UserList() {
  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    {
      field: "user",
      headerName: "User",
      width: 200,
      renderCell: (params) => {
        console.log(params);
        return (
          <>
            <Avatar src={params.value.avatar} />
            {params.value.username}
          </>
        );
      }
    },
    { field: "email", headerName: "E-mail", width: 130 },
    {
      field: "status",
      headerName: "Status",
      width: 90
    },
    {
      field: "transaction",
      headerName: "Transaction",
      width: 100
    }
  ];

  const rows = [
    {
      id: 1,
      user: {
        username: "Harry Potter",
        avatar:
          "https://assets.materialup.com/uploads/bebad102-7f40-4941-99cd-54366113003e/avatar-08.png"
      },
      email: "Harry@gmail.com",
      status: "Active",
      transaction: "$120"
    }
  ];

  return (
    <>
      <DataGrid
        autoHeight
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </>
  );
}

正如您所看到的，您定义的部分非常重要，变量中有 5 列columns：

1. ID
2. 用户
3. 电子邮件
4. 地位
5. 交易

虽然按行提供的值包含 6 行。这是第一个问题。重构代码以适应DataGrid组件期望接收的列结构。

所以而不是：

{ id: 1, 
    username: 'Harry Potter', avatar:"https://assets.materialup.com/uploads/bebad102-7f40-4941-99cd-54366113003e/avatar-08.png", 
    email:"Harry@gmail.com", 
    status:"Active",
    transaction:"$120" 
    }

使用列名将和user的数据保存在一起。要访问 中的此类数据，您应该通过，它允许直接访问列值，而不是通过 params.row ，它允许您访问整行，但您应该执行类似 和的操作。它更长，只有当我想加入一些现有列以将新列与串联值组合在一起时，我才会使用它。否则我认为它更容易使用。usernameavatarparamsparams.valueparams.row.user.usernameparams.row.user.avatarparams.value