使用 else if 语句重构组件

Question

我的问题是如何重构我的代码，首先，我有一个item.status可以是"活动"、"non_active"和"挂起"，当这个item.status"活动"时，我渲染一个按钮，当"非活动"时，我渲染另一个按钮，但当这个项目"挂起"时，我确实渲染了两个按钮， 所以我感谢你的帮助。

这是我的代码：

const renderAcceptActions = (item, onClickActivate, onClickDeactivate) => {
if (item.status == "non_active") {
return (
<td>
{onClickActivate && (
<CButton
color="primary"
variant="outline"
size="sm"
className="mr-2"
onClick={() => onClickActivate(item)}
>
Ativar
</CButton>
)}
</td>
);
} else if (item.status == "active") {
return (
<td>
{onClickDeactivate && (
<CButton
color="danger"
variant="outline"
size="sm"
onClick={() => onClickDeactivate(item)}
>
Desativar
</CButton>
)}
</td>
);
} else {
return (
<td>
{onClickActivate && (
<CButton
color="primary"
variant="outline"
size="sm"
className="mr-2"
onClick={() => onClickActivate(item)}
>
Ativar
</CButton>
)}
{onClickDeactivate && (
<CButton
color="danger"
variant="outline"
size="sm"
onClick={() => onClickDeactivate(item)}
>
Desativar
</CButton>
)}
</td>
);
}
}; 

Answer 1

您可以定义两个变量，如下所示

const renderFirstButton = item.status === 'active' || item.status === 'pending';
const renderSecondButton = item.status === 'inactive' || item.status === 'pending';

Answer 2

if (item.status == "non_active" || item.status == "pending"){render first button}
if (item.status == "active" || item.status == "pending"){render second button}