如何根据后端响应动态更改 material ui 图标？

Question

我有一个table，在这个table中，有一个名为status的列，在这个列中，后台返回了三个值，分别是“approve”、“Review” ”和“待定”。我的问题是，当状态为“批准”时，我希望将图标的形状更改为“VerifiedUserIcon”（从'@material-ui/icons/VerifiedUser'导入VerifiedUserIcon；）并且当状态审查更改图标的形状时到“VisibilityIcon”，就像这张图

我该如何解决我的问题？

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={<FaceIcon />}
    label={n.status}
    variant="outlined"
  />
</TableCell>;

Answer 1

const statusIcon = (status) => {
  switch (status) {
    case "verified":
      return <VerifiedIcon />;
    case "review":
      return <ReviewIcon />;
    default:
      return <DefaultIcon />;
  }
};

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip style={{ fontSize: "1.2rem" }} icon={statusIcon(n.status)} label={n.status} variant="outlined" />
</TableCell>;

Answer 2

你也可以使用ternary operator来指定图标，假设只有3个状态

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={
      n.status === "approve" ? (
        <VerifiedIcon />
      ) : n.status === "review" ? (
        <ReviewIcon />
      ) : (
        <PendingIcon />
      )
    }
    label={n.status}
    variant="outlined"
  />
</TableCell>;

Answer 3

您甚至可以尝试 Object literals 您的图标，方法是将状态与相关图标进行映射，如下所示。

const statusIcon = {
  verified: <VerifiedIcon />,
  review: <ReviewIcon />,
  // other icons based on your status
};

然后在您的代码中，您可以使用 statusIcon 对象并根据属性.

获取图标

<TableCell className="p-4 md:p-16 truncate" component="th" scope="row">
  <Chip
    style={{ fontSize: "1.2rem" }}
    icon={statusIcon[n.status]}
    label={n.status}
    variant="outlined"
  />
</TableCell>

如何根据后端响应动态更改 material ui 图标？

How to dynamically change material ui icon depending on the backend response?

reactjs

material-ui