我有以下模板,其中包含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 starter。当我调试它时,我看到以下内容:
createElement('li', {
'data-value': '1', className: true ? 'fas' : 'far',
...
})
就像表达式在构建期间被评估一样。我错过了什么?
问题是运营商优先级。 '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>