在我的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>