类名的 React JSX 表达式不会在运行时评估答案

【问题标题】：React JSX expression for className is not evaluated at runtime类名的 React JSX 表达式不会在运行时评估
【发布时间】：2018-08-29 16:11:57
【问题描述】：

我有以下模板，其中包含 className 属性的表达式，我希望每次 React 调用 render 方法时都会对其进行评估：

<ul className='ratings' onClick={this.handleClick}>
    <li className={'fa-star ' + (this.rating > 0) ? 'fas' : 'far'}></li>
</ul>

我希望它被转换成这个，这实际上是online Babel transpiler shows：

React.createElement(
    'ul',
    { className: 'ratings', onClick: this.handleClick },

    React.createElement('li', { 
        'data-value': '1', 
        className: 'fa-star ' + (this.rating > 0) ? 'fas' : 'far' 
    })
);

我正在使用 create-react-app 启动器。当我调试它时，我看到以下内容：

createElement('li', { 
    'data-value': '1', className:  true ? 'fas' : 'far', 
    ...
})

这就像在构建期间正在评估表达式。我错过了什么？

【问题讨论】：

在三元组周围加上括号。在控制台中播放立即显而易见。（不相关，但如果可能，更喜欢字符串插值和更新的 React。）
@DaveNewton，是的，我对 JSX 语法感到困惑。是的，我每天都在 JS 中使用字符串插值，我也会在这里使用它。更新的 React 呢？
@AngularInDepth.com 哦，抱歉，您显示的是转译的 JSX；我误会了。
@DaveNewton，不用担心，谢谢。有趣的是，即使括号不正确，online babel 也显示了预期的结果，我想这让我很困惑
@BhojendraRauniyar，看到什么，抱歉？问题是括号放错了

标签： reactjs react-create-app

【解决方案1】：

问题是运算符优先级。 'fa-star ' + (this.rating > 0) 被评估为三元条件并且始终为真。

应该是：

<li className={'fa-star ' + (this.rating > 0 ? 'fas' : 'far')}></li>

一个方便的班级加入助手是classnames：

<li className={classnames('fa-star', { fas: !!this.rating, far: !this.rating })}></li>

【讨论】：