javascript - 在我的 JSX 中放置一个条件语句

Question

<li className=`nav-item {(this.props.activeState===1) ? "active":""}`><a href="#">Main</a></li>

^ 这是我的代码。如果满足条件，我希望类名“active”出现在“nav-item”旁边。我以为放反引号可以让我一起使用文本和代码，但我收到一个错误 - JSX 值应该是表达式或引用的 JSX 文本

我该如何正确执行此操作？

Answer 1

您需要使整个模板字符串成为 JSX prop 表达式:

<li className={`nav-item ${(this.props.activeState === 1) ? "active": ""}`}>
  ...
</li>

使用变量可能更简洁:

const activeClass = (this.props.activeState === 1) ? "active": "";
// ...
<li className={`nav-item ${activeClass}`}>
  ...
</li>