如何在 @mui/x-data-Grid表中显示图像？ 我是React.js初学者。当我尝试将图像化身添加到我的MUI表中时，我会收到以下错误。 “ TypeError：params.Rows不确定” 我将代码放在下面。 导入从'

Question

EXPORT默认函数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:"[email protected]", 
    status:"Active",
    transaction:"$120" 
    },];

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

}

代码

我在您的代码和未使用的组件中看到一些数据结构问题。 首先是化身，可以使用MUI组件设置，例如..

<Avatar>

头像组件mui 可以通过以下方式添加以下方式：

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

Answer 1

但是要使用它，当然您要导入它，因此，除了

DataGrid

Avatar

，您还导入

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

组件：

user

通过对您对行做的事情进行解释，这是一个问题。因为您正在尝试将其渲染到列

username

：

avatar

和

Datagrid

的值中。为了实现这一目标，您需要将它们既有。我服用了一个小提琴，粘贴了您的代码并修复了一些修复，您可以看到我的意思。

小提琴是：

---

datagrid文本 +头像列示例

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

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: "[email protected]",
      status: "Active",
      transaction: "$120"
    }
  ];

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

您可以看到，这是您定义的部分非常重要的，

columns

变量中的5列：

Id 用户

email

Status

transaction

当行中提供的值时，包括6行。这是第一个问题。重组代码以适应

DataGrid

组件期望接收的列结构。 so而不是：

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

2. 使用列名
user
3. 将数据和
username
4. 的数据保留在一起。要在
avatar
5. 中访问此类数据，您应该浏览
params

，该数据允许直接访问列值，而不是通过参数访问params.row，这使您可以访问整个行，但是您应该执行诸如

params.value

和

params.row.user.username

之类的事情。它的时间更长，只有当我想加入一些现有列以将一个具有串联值的新列组合在一起时，我才会使用它。否则我认为使用

params.row.user.avatar

。

b，因为您有一个错别字：不是

params.value

，而是

params.rows

。因此，您可以访问这样的行信息：params.row

{ field: 'user', headerName: 'User', width: 200, renderCell: (params)=>{
  return (
    <div>
      <img src={params.row.avatar} alt='' />
      {params.row.username}
    </div>
  )
} },

在此细胞中

params.value

Answer 2