由于我是 React 的新手，因此我在制作一个功能组件时遇到了一些困难，该组件基本上应该根据从数据中获取的类型动态更改图标的呈现。
表本身已经存在，它被映射并获取我需要的所有数据。
在一行/单元格中，我必须包含一个传递类型的 Icon 组件，并且我还需要在onClick此处具有功能
<TableCell>
<Icon rowType={row.type} onClick={<some function>}/>
</TableCell>
这row.type是我得到的一种特定数据，我需要关注 2 种类型
基于这 2 种类型，我必须在表中呈现一个 SLOT_ICON 和一个 SITE_ICON，当我连续拥有这两个类型之一时。
我想制作一个，if/elseif但实际上我不知道如何呈现以及如何根据我单击的图标包含 onClick 事件。
伪代码示例：
const Icon = rowType => {
if (rowType === 'SLOT') {
SLOT;
} else if (rowType === 'SITE') {
SITE;
}
<-- onClick logic somewhere here? -->
return Icon
};
您可以在反应中使用条件渲染。
const Icon = ({ type, onClick }) => {
if (type === "SLOT") return <img src={"slot"} onClick={onClick} />;
else if (type === "SITE") return <img src={"site"} onClick={onClick} />;
else return <img src={"icon"} onClick={onClick} />;
};
您可以使用Icon如下
<Icon type="SLOT" onClick={() => {}} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句