我有一個表，在這個表中有一個名為 status 的列，在這個列中從后端回傳三個值，它們是“approve”、“Review”和“pending”。我的問題是，當狀態為“批準”時，我希望將圖示的形狀更改為“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>
uj5u.com熱心網友回復：
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>;
uj5u.com熱心網友回復：
您還可以使用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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466517.html
上一篇：想要過濾一個陣列