React 类名控制工具库ClassName 简化类写法 条件控制 样式处理

介绍

classnames 是一个 JavaScript 库，用于动态地构建和管理 HTML 元素的 class 属性。它可以帮助你根据不同的条件（例如布尔值、对象、数组等）来组合多个类名，从而更简洁、更方便地管理类名的添加与删除。

在 React 或其他前端框架中，动态地设置 class 是非常常见的需求。例如，某些元素可能需要根据用户输入、交互或其他动态状态来改变样式。如果手动拼接 class 字符串，代码会显得冗长而且难以维护，classnames 通过更简洁的方式来解决这个问题。

官方文档：https://github.com/JedWatson/classnames

安装依赖

npm install classnames

普通拼接

import classNames from 'classnames';const buttonClass = classNames('btn', 'btn-primary');
console.log(buttonClass); // 'btn btn-primary'

条件拼接

isPrimary 是一个布尔值。如果为 true，则 btn-primary 类会被添加。

import classNames from 'classnames';
//btn为默认样式
const buttonClass = classNames('btn', { 'btn-primary': isPrimary });
console.log(buttonClass); // 如果 isPrimary 为 true，输出 'btn btn-primary'

多条件拼接

可以传递一个数组，classnames 会将数组中的每个类名合并起来。

import classNames from 'classnames';const buttonClass = classNames('btn', ['btn-primary', 'btn-disabled']);
console.log(buttonClass); // 'btn btn-primary btn-disabled'

多条件拼接

import classNames from 'classnames';const buttonClass = classNames('btn', { 'btn-primary': isPrimary, 'btn-disabled': isDisabled });
console.log(buttonClass); // 如果 isPrimary 为 true 且 isDisabled 为 true，输出 'btn btn-primary btn-disabled'