在 React 中使用 CLSX 有条件地应用类

1. React 中的 clsx() 函数
2. 在 React 中使用 clsx() 函数设置条件类

本文将解释 clsx() 函数并有条件地在 React 中应用类。

React 中的 clsx() 函数

同名包中的 clsx() 函数是一个 JavaScript 实用程序，用于设置设置 className 属性值的条件。它接受无限数量的参数，不限于一种特定类型。

最终，clsx() 函数返回一个 string 插值，检查 JavaScript 变量的 boolean 值并相应地应用类。

当然可以自己编写这些字符串，但它比简单地使用 clsx() 函数要耗时得多。

查看官方 npm 文档。

在 React 中使用 clsx() 函数设置条件类

React 开发人员使用 clsx() 函数来应用类。

我们可以设置应用特定类需要满足的条件，但这不是必需的。

例子：

import "./styles.css";
import clsx from "clsx";
const classNameOne = "redButton";
const classNameTwo = "blueBorder";
export default function App() {
    const number = 3;
    return (
        <div className="App">
        <button className={clsx(classNameOne, { [classNameTwo]: number > 5 })}>
            A sample button
        </button>
        </div>
    );
}

在上面的示例中，我们有两个具有字符串类型值的变量。我们还有一个变量，称为 number，设置为任意数字，以演示 clsx() 函数如何有条件地应用于（或不应用于）指定的类。

classNameOne 函数的第一个参数没有任何关联的条件，因此无论如何它通常都会被应用。第二个参数是具有 classNameTwo 属性的 key-value 对和条件作为其值的对象。

在这种情况下，number 变量的值为 3，不超过 5，因此 classNameTwo 不适用。尝试更改 CodeSandbox 上的值，看看自己会发生什么。

这是基本条件样式的示例。乍一看，你并不明白为什么需要 clsx() 函数，但是一旦你的样式设置条件变得更加复杂，clsx() 允许你轻松设置这些条件。