React好用类名管理小工具：classnames

 classnames 是一个在 React 开发中非常流行的 JavaScript 工具库，它可以帮助开发者有条件地连接类名字符串，简化动态添加或删除类名的过程。

  

目录

一、 安装

二、导入

三、使用 

四、选项卡应用

---

一、 安装

npm install classnames --save

二、导入

 React 项目中使用时，需要先导入 classnames：

import classnames from 'classnames';

三、使用 

• 普通字符串粘合：将参数拼接为字符串，中间用空格分开：

  const className = classnames('foo', 'bar'); // => 'foo bar'

• 带条件的类参数：第二个参数是对象类型，键值为 true 则粘合进类名中；若为 false，则不粘合：

  const className = classnames('foo', { bar: true }); // => 'foo bar'
  const className = classnames('foo', { bar: false }); // => 'foo'

• 参数类型是数组：数组可以递归展开数组中的每一项：

  const className = classnames('a', ['b', { c: true }, { d: false }]); // => 'a b c'

• 特别注意：null 和 undefined 会被忽略：

  const className = classnames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

四、选项卡应用

 比如我们要实现一个选项卡的切换效果：

 其核心代码就是：

className={`item ${liColor === item.type ? 'active' : ''}`}

判断选项卡选项自身属性和被点击的选项卡选项传入的属性是否相等？

如相等，则获得特殊的类名，如果不相等，则失去类名

我们能否更加简洁的编写这句表达式呢？

将原来的代码改成classnames的写法

原来：

className={`item ${liColor === item.type ? 'active' : ''}`}

改成： 

className={classnames('item', { active: liColor === item.type })}

 完整代码实现

import { useState } from 'react';
// 6、引入classnames库
import classnames from 'classnames';
export default function UseStateDemo() {
    let [count, setCount] = useState(0);
    let [obj, setObj] = useState({ name: '张三', age: 18 })
    // 1、存储列表选项的值
    let [arrData, setArrData] = useState([{ type: 'A', value: '选项1' }, { type: 'B', value: '选项2' }])
    // 2、存储选颜色的值
    let [liColor, setLiColor] = useState('A')
    const fn = (type) => {
        setLiColor(type)
    }
    return (
        <>
            <ul className="flex">
                {
                    arrData.map((item, index) => {
                        // 3、点击谁就把参数携带进去
                        return <li onClick={() => fn(item.type)}
                            // 5、安装插件npm install classnames
                            // className={`item ${liColor === item.type ? 'active' : ''}`}
                            // 7、使用classnames插件
                            className={classnames('item', { active: liColor === item.type })}
                            key={item.value}
                        >
                            {item.value}
                        </li>
                    })

                }

            </ul >
        </>

    )
}