Question

我有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>

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

Answer 1

虽然您的代码天生没有错，但是您可以使用类方法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>
  )
}

Answer 2

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

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

   return 'SomeClassName'
}

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

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

2 个答案: