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

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>