reactjs OR条件在第二次比较中中断

Question

我正在尝试根据特定值向组件添加不同的 ID。

我的方法如下

id={activePage === ('dashboard' || 'evc_detail')? 'bg_gradient':'bg_normal'}

在这种情况下，如果 activePage 等于 dashboard，则会添加正确的 ID，但如果 activePage 等于 evc_detail，则不会注册。我使用此条件的方式是否错误，我该如何解决？

Answer 1

如果你想进行多重比较，你需要手动声明它们：

(activePage === 'dashboard' || activePage === 'evc_detail') ? 'bg_gradient' : 'bg_normal'

另一个选项是创建项目数组（或集合），并使用 Array.includes()（或 Set.has）检查项目是否在组中：

const gradientPages = ['dashboard', 'activePage']

gradientPages.includes(activePage) ? 'bg_gradient' : 'bg_normal'

如果 activePage 不是 'dashbarod'，则原始表达式 activePage === ('dashboard' || 'evc_detail')? 'bg_gradient':'bg_normal' 不起作用，因为它的计算方式：

1. 'dashboard' || 'evc_detail' 被评估，因为 'dashboard' 是一个真值表达式，结果总是 dashboard.
2. 'dashboard'与activePage比较。如果 activePage 为 'dashboard'，则结果为 true，否则为 false。