react 使用clsx库动态构建类名

目录

1. 介绍

2. 安装

3. 使用

总结

---

1. 介绍

在React中经常需要动态的构建类名，clsx就是一个用于动态拼接css类名的JS库。

2. 安装

npm install clsx // npm安装
yarn add clsx // yarn安装

3. 使用

在需要使用到的组件内部引入：

import clsx from 'clsx'

clsx 函数是 clsx 库的核心函数，用于动态拼接 CSS 类名。它接收任意数量的参数，并将它们拼接为一个字符串作为返回值。

参数的类型可以是字符串、对象或数组。

1. 字符串-简单拼接

const classNames = clsx("name1", "name2")
console.log(classNames) // "name1 name2"

2. 对象-条件类名

clsx 库还提供了一种更灵活的方式来处理条件类名的情况。您可以将一个对象传递给 clsx 函数，并使用键值对的方式设置类名。这样，在满足条件的情况下，类名将被添加到最终的拼接结果中。

const isActive = true
const classNames = clsx("name1", {"active": isActive})
console.log(classNames) // "name1 active"

3. 数组

除了字符串和对象以外，clsx 函数还可以接收一个数组作为参数。这在需要根据某些条件动态选择多个类名时非常有用。

const isActive = true
const isBold = false
const classNames = clsx(['name1', {'bold': isBold}, {'active': isActive}])
console.log(classNames) // "name1 active"

4. null或空字符串

当参数中存在空值或空字符串时，clsx函数会自动忽略，不会拼接

5. 字符串模板替换

有时候，我们需要在类名中动态替换一些值。clsx库还提供了一种字符串模板替换的方式来满足这种需求。可以在类名中使用占位符，并将它们与变量一起传递给 clsx 函数。

const color = 'red'
const classNames = clsx('name1', `color-${color}`)
console.log(classNames) // "name1 color-red"

总结

通过 clsx，我们可以有条件地、清晰地和简洁地构建类名，而不需要冗长或重复的代码逻辑。

而且该库很小，兼容性也很好，是完美的classnames 替代品。

这个库在 React 社区中很受欢迎，因为 React 经常需要动态地构建类名