当前位置：首页 > article >正文

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

article 2025/1/4 5:17:27

介绍

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来实现动态类名。

普通字符串拼接

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

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

分析：这里使用了 字符串拼接的方式 来实现了动态控制类名的显示与隐藏；
缺点：当类名过多的时候，使用 字符串拼接的方式 ，不直观，也很容易出错。

classNames

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

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

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

// 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>