根据状态将CSS类应用于特定元素

时间:2018-11-29 12:42:25

标签: css reactjs

我有React组件,其状态由redux,ul list和css类管理。我想根据状态将类应用于li元素之一。例如,如果myStateProp = a,则将CSS类应用于第一个li,如果myStateProp = b,则将类应用于第二个li,依此类推。但是我不确定该怎么做。

现在我已经解决了这个问题:

<ul>
    <li className={this.props.myStateProp ==="a" ? "myCssClass" : ""}>A</li>
    <li className={this.props.myStateProp ==="b" ? "myCssClass" : ""}>B</li>
    <li className={this.props.myStateProp ==="c" ? "myCssClass" : ""}>C</li>
</ul>

但是我不太喜欢这种方法,似乎复制了太多代码。也许有一种方法可以更整齐地做到这一点?

2 个答案:

答案 0 :(得分:3)

虽然您的代码天生没有错,但是您可以使用类方法ternary语句将其简化并返回"myCssClass"null

class Example extends PureComponent {

  isActive = item => this.props.someProp === item ? "myCssClass" : null  

  render = () => (
    <ul>
      <li className={isActive("a")}>A</li>
      <li className={isActive("b")}>B</li>
      <li className={isActive("c")}>C</li>
    </ul>
  )
}

或者,更进一步,简化您的li元素(虽然不那么重复,但它确实抽象了正在发生的事情):

const listItems = ["a","b","c"];

class Example extends PureComponent {

  isActive = item => this.props.someProp === item ? "myCssClass" : null  

  render = () => (
    <ul>
      {listItems.map(item => (
        <li key={item} className={isActive(item)}>
          { item.toUpperCase() }
        </li> 
      ))}
    </ul>
  )
}

答案 1 :(得分:0)

您可以创建将返回类名的函数

const classNames = (data)=>{
   swtich/case/if... what you want

   return 'SomeClassName'
}

<li className={this.classNames(dataFromStore)}>C</li>