使用 classnames 动态控制 React 组件 className

本是古典何须时尚 2022-05-18 01:08 338阅读 0赞

标题可能有些乱，前一个 [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文档][React]给的一种方法。上面代码的意思可以看下图，就是点增加、减少控制 `state.num` 的值，`num > 3`时，给div加一个 class `bg-orange`，使背景变橙色

![这里写图片描述][70]

#### 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（可以移步[这里][Link 1]看彩虹）

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

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

[classnames]: https://github.com/JedWatson/classnames
[React]: https://doc.react-china.org/docs/faq-styling.html#%E6%80%8E%E6%A0%B7%E7%BB%99%E7%BB%84%E4%BB%B6%E6%B7%BB%E5%8A%A0-css-%E7%B1%BB
[70]: /images/20220518/7b2211d42ad14da794a234d957ad172b.png
[Link 1]: https://codepen.io/zwkkkk1/pen/YjrQzG
[React_Redux _Classnames]: https://www.jianshu.com/p/9cf57787360d