react组件的嵌套三元运算符

Question

我想提出一个带有react组件的嵌套if三元运算符，但受到了挑战，这是我的逻辑：

if (value==='bank' && is_valid_iban && is_completed) {
return <Checked/>
}
else if (is_completed) {
return <Checked/>
}
else if (value==='businessplan' && is_required) {
return <NotChecked/>
}

这是我的零钱：

{
(!value=== 'bank' || is_valid_iban) &&
is_completed ? (<Checked/>) : (value ==='businessplan' && is_required && (<NotChecked/>))
}

对于上面的逻辑，想出一个三元运算符的最佳方法是什么。

感谢

Answer 1

此解决方案旨在简化以下给定条件集：

if (value==='bank' && is_valid_iban && is_completed) {
return <Checked/>
} else if (is_completed) {
return <Checked/>
} else if (value==='businessplan' && is_required) {
return <NotChecked/>
}

从上面观察到CCD_ 1是第一&第二个条件。类似这样的东西：((A && B && C) || C)，可以表示为(A && B) || C。

使用标准if..else结构：

if ((value === 'bank' && is_valid_iban) || is_completed) return <Checked />
else if (value === 'businessplan' && is_required) return <NotChecked />
else return null;

使用三元?:

return (
((value === 'bank' && is_valid_iban) || is_completed)
? <Checked />
: (value === 'businessplan' && is_required)
? <NotChecked />
: null
);

使用?:时，请始终缩进代码，使其可读。if else也是如此；然而，if else结构比?:可读性强得多。

Answer 2

让它变得简单：

{(value === "bank" && is_valid_iban && is_completed) || is_completed ? (
<Checked />
) : (value === "businessplan" && is_required) ? (
<NotChecked />
) : (
<NotChecked />
)}