如何在反應渲染方法中設置活動類？

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} 

如何通過帶有條件的類名..與sty le

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>