如何在反应渲染方法中设置活动类？

Question

使用 UI 工具包

   <ul className='uk-nav'>
          {languages.map(function (lang) {
            return (
              <li
                style={lang === this.state.selectedLanguage ? {color: '#d0021b'} : null}
                onClick={this.updateLanguage.bind(null, lang)}
                key={lang}>
                  {lang}
              </li>
            )
          }, this)}
        </ul>

我能够获得输出以在单击时添加带有新颜色的样式

如何在这个状态下添加 css 类名

      className={lang === this.state.selectedLanguage ? {'uk-active'} : null}

你如何传递一个带有条件的类名......以与样式相同的方式

Answer 1

className 只是一个字符串。试试这个：

 <ul className='uk-nav'>
          {languages.map(function (lang) {
            return (
              <li
                className={lang === this.state.selectedLanguage ? 'uk-active' : null}
                onClick={this.updateLanguage.bind(null, lang)}
                key={lang}>
                  {lang}
              </li>
            )
          }, this)}
        </ul>