React里通过使用classNames优化类名控制

介绍

classNames是一个用于动态构建CSS 类名字符串的JavaScript库 ，常用于React 项目中。它可以根据条件 动态地组合类名字符串，简化了在模板中根据逻辑添加或删除CSS类名的过程。使用classNames 可以避免手写复杂的字符串拼接或三元运算符，提高代码的可读性和维护性 。

基本用法

安装

通过 npm 或yarn 来安装classNames

命令：

npm install classnames --save
yarn add classnames

引入

在 React 项目中，可以通过以下方式引入：
import classNames from 'classnames';

在nodejs里引入：
var classNames = require('classnames');

使用

classNames 接受多个参数 ，可以是字符串、对象或布尔值。它会根据传入参数的真值来决定是否添加对应的类名。

下面对比普通字符串拼接实现动态类名及使用classnames来实现动态类名。

普通字符串拼接

这里直接使用了上篇文章的部分代码，具体的字符串拼接完整页面文档可参考上篇文章。

js 复制代码

{tabList.map(item =>
   <span key={item.type}
     className={`type-tab ${ currentType == item.type && 'activeType'}`}
     onClick={() => checkType(item.type)}
   >{item.tab}</span>
 )}

分析：这里使用了 字符串拼接的方式 来实现了动态控制类名的显示与隐藏；

缺点：当类名过多的时候，使用 字符串拼接的方式 ，不直观，也很容易出错。

classNames

直接在页面里添加classNames , 这里直接对比上方的 字符串拼接的方式的代码，进行修改

js 复制代码

{tabList.map(item =>
   <span key={item.type}
     className = {classNames('type-tab', {activeType: currentType == item.type})}
     onClick={() => checkType(item.type)}
   >{item.tab}</span>
 )}

在js里定义，然后在页面通过className直接使用。

js 复制代码

// css部分
.redStyle {
  color: red;
}
.sizeStyle {
  font-size: 26px;
}
//  js 部分
// js引入  classnames
import classNames from 'classnames'
//  定义是否显示
const isRed = true;
const isSize = true;
//  定义样式，word-style是默认样式，对象里的另外两个是通过条件控制的样式。
const moreStyle = classNames('word-style',{
  'redStyle' : isRed,
  'sizeStyle': isSize,
})
console.log(moreStyle)  // word-style redStyle sizeStyle
// html部分
 <p className={moreStyle}>这是一段文字</p>

分析：这里使用了 classnames的方式，来添加动态类名；可以通过条件来组合类名，以对象来控制是否显示当前类名。

优点：

简化代码： 避免手写复杂的字符串拼接或三元运算符，减少代码量。
提高可读性： 代码更清晰明了，易于维护。
减少错误： 减少手动拼接字符串导致的错误，如多余的空格或漏掉的类名‌。