If-else在使用react的对象数组内

Question

我有一个对象数组，其中定义了需要显示的多个图标。

const iconButtonList = [
{
icon: <AddIcon />,
onClick: onClickOpenRuleEditor,
isDisabled: false,
label:"Add"
},
{
icon: <EditIcon />,
onClick: onClickOpenRuleEditor,
isDisabled: isEditDisabled
},
{
icon: <CopyIcon />,
onClick: onClickCopyRules,
isDisabled: true
},
{
icon: <TrashIcon />,
onClick: onDelete,
isDisabled: isRemoveDisabled
},
{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
}];

我循环遍历数组并显示div元素中的所有图标。

const gridActionButtons =
<div>
{
iconButtonList.map((element, index) => (
<IconButton
key={index}
flat
secondary
label={element.label}
icon={element.icon}
isDisabled={element.isDisabled}
onClick={element.onClick}/>)
)
}
</div>;

除了定义的图标外，我还想根据所选择的选项卡显示一些其他图标，我想在数组中添加if-else。我试着这样做:

{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
},
{
if: {
selectedTab:0
},then :[{
icon: `<DeploymentIcon />`,
onClick: onClickDeploy,
isDisabled: true
}],
else:[{

icon: `<DocumentExcelIcon />`,
onClick: onClickUndeploy,
isDisabled: true
}]
}
];

但这不起作用。如果不在if-else条件中定义所有其他图标，是否有可能实现这样的目标?

Answer 1

你可以这样做:

{
icon: <RefreshIcon />,
onClick: onClickRefreshRulesGrid,
isDisabled: false
},
selectedTab === 0 ?
{
icon: `<DeploymentIcon />`,
onClick: onClickDeploy,
isDisabled: true
},
:{
icon: `<DocumentExcelIcon />`,
onClick: onClickUndeploy,
isDisabled: true
}
];