react之中利用第三方库添加类名classnames

最新推荐文章于 2025-03-11 11:31:57 发布

M团子

最新推荐文章于 2025-03-11 11:31:57 发布

阅读量2.7k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_47872824/article/details/123003765

版权

这篇博客探讨了在React中如何更方便地添加动态类名，相较于Vue的便利性，React需要借助第三方库如classnames来实现。文中介绍了安装classnames库的步骤，并展示了如何使用该库一次性添加多个类名，以及根据变量条件动态插入类名。通过这些方法，开发者可以在React应用中更加灵活地管理组件的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react之中添加动态类名没有在vue之中那么方便，可以使用第三方库进行
1、安装库

yarn add classnames

2、使用
原生在react之中添加class方法：

<h2 className={"foo bar active"}>1</h2>
//下面这个字符串拼接添加类名记得" active"前需要一个空格
<h2 className={'title'+(isActive?" active":"")}>2</h2>
//下面就避免上述的还需要加空格
<h2 className={['title',(isActive?"active":"")].join("")}>3</h2>

使用第三方库

import classNames from "classnames"

//一次多个类名
<h2 className={classNames("foo","bar","active")}>1</h2>
//根据变量的真否判断是否添加类名
<h2 className={classNames({"foo":isFoo,"active":isActive},"bar")}>2</h2>
//数组的形式实现
<h2 className={classNames(["title",{"active":isActive}])}>3</h2>