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

Question

我是一个 react.js 初学者。当我尝试将图像头像添加到我的 MUI 表时，出现以下错误。 “类型错误: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>
)

Code

Answer 1

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

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

可以通过以下方式添加:

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

但要使用它，您当然需要导入它，因此，除了 DataGrid ，您还导入了 Avatar组件:

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

---

如果解释您对行所做的操作，就会出现问题。因为您正试图渲染到 user 列中值:username和 avatar .为此，您需要同时拥有它们。我拿了Datagrid fiddle，粘贴你的代码并进行一些修复，在某种程度上你可以明白我的意思。

这是 fiddle :DataGrid Text + Avatar column example

这里的 fiddle 中的代码也做了一点修改。

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
      />
    </>
  );
}

如您所见，您定义的部分非常重要，columns 中的 5 列变量:

1. 编号
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保留 username 的数据和 avatar一起。在 params 中访问此类数据, 你应该通过 params.value ，它允许直接访问列值，而不是通过 params.row，这使您可以访问整行，但您应该执行类似 params.row.user.username 的操作和 params.row.user.avatar .它更长，只有当我想加入一些现有的列来组合一个具有连接值的新列时，我才会使用它。否则我认为它更容易使用 params.value .