在运行时不评估className的React JSX表达式

时间:2018-08-29 16:11:57

标签: reactjs react-create-app

我有以下带有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', 
    ...
})

就像在构建期间对表达式进行求值。我想念什么?

1 个答案:

答案 0 :(得分: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>