React JSX-выражение для className не оценивается во время выполнения

Question

У меня есть следующий шаблон с выражением для className свойство, которое я ожидаю оценивать каждый раз, когда React вызывает render метод:

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

Я ожидаю, что это будет преобразовано в это, и это на самом деле то, что показывает транспортер Babel онлайн:

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

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

Я использую стартер создания-реакции-приложения. И когда я отлаживаю его, я вижу следующее:

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

Это как выражение оценивается во время сборки. Что мне не хватает?

Answer 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>