使用 classnames 动态控制 React 组件 className

标题可能有些乱，前一个 classnames 是 React 官方推荐的一个用来控制给组件添加 CSS 类的一个包。

首先给一个 Demo，我用不同的两种方法来写一写，看看区别。

方法1

  render() {
    let className = "demo-wrapper"
    if(this.state.num > 3)
      className += ' bg-orange'
    else
      className = "demo-wrapper"

    return (
      <div className={className}>
        <p>{this.state.num}</p>
        <button onClick={this.addClick}>增加</button>
        <button onClick={this.removeClick}>减少</button>
      </div>
    )
  }

方法1 是React文档给的一种方法。上面代码的意思可以看下图，就是点增加、减少控制 state.num 的值，num > 3时，给div加一个 class bg-orange，使背景变橙色

classnames 方法

render() {
    var divClass = classNames({
      "demo-wrapper": true,
      'bg-orange': this.state.num > 3
    })
    return (
      <div className={divClass}>
        <p>{this.state.num}</p>
        <button onClick={this.addClick}>增加</button>
        <button onClick={this.removeClick}>减少</button>
      </div>
    )
  }

代码少可能没体现出效果，但是需要控制的 class 多了，classnames 和 React 的组合真的很赞~

有一个略微复杂点的demo（可以移步这里看彩虹）

如果是一般的思路该用多少代码量。

这里只是介绍一个新的控制组件的思路，并不介绍怎么使用 classnames，有兴趣的可以去它的 github仓库，也可以看看这篇文章 React/Redux 的好帮手Classnames