代码之家 › 专栏 › 技术社区 › Alexander Farber

如何在MUI X DataGrid列中显示img?

mui-x-data-grid material-ui reactjs

0

Alexander Farber · 技术社区 · 2 年前

作为一个React新手,我首先创建了 a test project with MUI Table ,工作得很好:

但是,在显示数据时,我希望有分页和可排序列。

所以我创造了 another test project using MUI X DataGrid :

正如您所看到的,它有点工作,但最后一列逐字逐句地显示了我的HTML img代码。

我曾尝试在中使用value getter my custom TopGrid.jsx component :

const wrongImgHandler = (photo) => {
  return photo && PHOTO_PATTERN.test(photo) ? photo : "female_sad.png";
};

const imgErrorHandler = ({ currentTarget }) => {
  // prevents looping
  currentTarget.onerror = null;
  currentTarget.src = "male_sad.png";
};

const columns = [
  {
    field: "elo",
    headerName: "Elo",
    type: "number",
    width: 90,
  },
  {
    field: "given",
    headerName: "First name",
    width: 150,
  },
  {
    field: "photo",
    headerName: "Photo",
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `<img
        src=${wrongImgHandler(params.row.photo)}
        className="avatar"
        onError=${imgErrorHandler}
      />`,
  },
];

请告诉我,如何在MUI X DataGrid中显示带有onError处理程序的img元素。

0 回复 | 直到 2 年前

1

Alexander Farber 2 年前

谢谢@super renderCell 为我工作过:

const wrongImgHandler = (photo) => {
  return photo && PHOTO_PATTERN.test(photo) ? photo : "female_sad.png";
};

const imgErrorHandler = ({ currentTarget }) => {
  // prevents looping
  currentTarget.onerror = null;
  currentTarget.src = "male_sad.png";
};

const columns = [
  {
    field: "elo",
    headerName: "Elo",
    type: "number",
  },
  {
    field: "given",
    headerName: "First name",
    width: 200,
  },
  {
    field: "photo",
    headerName: "Photo",
    align: "center",
    sortable: false,
    renderCell: (params) => (
      <img
        src={wrongImgHandler(params.row.photo)}
        className="avatar"
        onError={imgErrorHandler}
      />
    ),
  },
];