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

使用 clsx() 根据固定类名和条件构建 className 字符串，再将该字符串传给 React 元素。本指南介绍如何安装，以及如何使用字符串、数组和对象组合类名。

CLSX 是什么？

clsx() 是 clsx 包提供的函数，可将传入的类名值组合成一个类名字符串。在 React 中，将它的结果传给 className 属性。参数中的条件决定哪些类名会出现在字符串里；React 的渲染则是另一回事。

例如，clsx('button', { 'button-primary': primary }) 会保留基础类名，并在 primary 为真值时加入 button-primary。与冗长的字符串拼接表达式相比，这种写法更容易读懂类名的选择逻辑。

在 React 项目中安装 CLSX

使用 npm 在项目中运行 npm install clsx 安装，或使用 Yarn 运行 yarn add clsx。然后在负责构建类名字符串的组件中导入默认导出：

import clsx from 'clsx';

CLSX 的基本用法

将固定类名作为字符串传入，并在对象中传入条件类名。对象键对应的值为真值时，该键会被加入结果：

const buttonClass = clsx('btn', { 'btn-primary': primary, 'btn-disabled': disabled });

React 按钮可以通过 className={buttonClass} 使用这个结果。当 primary 为真且 disabled 为假时，类名字符串包含 btn btn-primary；当两个条件都为假时，字符串只包含 btn。如果按钮确实应处于禁用状态，还要单独设置按钮的 disabled 属性；CSS 类只负责选择样式。

下面用纯 JavaScript 展示同样的预期选择结果，让生成的字符串更直观。这个小示例不会导入或执行 clsx 包；组件中应使用的包调用已在上面展示。

const primary = true;
const disabled = false;
const buttonClass = [
  'btn',
  primary && 'btn-primary',
  disabled && 'btn-disabled',
].filter(Boolean).join(' ');
console.log(buttonClass);

使用数组和嵌套对象的进阶用法

clsx() 也接受数组和对象，因此可以将不同来源的类名分组并组合。例如，clsx('card', { 'card-featured': isFeatured, 'card-highlighted': isHighlighted }, ['additional-class', { 'extra-class': isFeatured }]) 总会包含 card 和 additional-class。当 isFeatured 为真值时，还会包含 card-featured 和 extra-class；当 isHighlighted 为真值时，会包含 card-highlighted。将生成的字符串通过 className={cardClass} 传给组件。

性能方面的考量

现有信息没有提供有关 clsx() 的性能测量或支持证据。因此，无法据此判断该包是否轻量、高效、经过优化，或适合用于对性能敏感的应用；也无法判断它是否会影响 React 的重新渲染。根据这些信息不能得出性能结论。

总结

使用 clsx() 将静态和条件类名组合成 className 字符串。它接受字符串、数组和对象，有助于在 React 组件中更清晰地组织类名选择逻辑。

常见问题

1. CLSX 有什么用途？
   clsx() 会将传入的值组合成类名字符串，你可以将它传给 React 元素的 className 属性。

2. 如何在 React 项目中安装 CLSX？
   运行 npm install clsx 或 yarn add clsx，然后使用 import clsx from 'clsx'; 导入。

3. CLSX 可以处理数组和对象吗？
   可以。字符串、数组和对象可以组合使用；对象键是否加入结果取决于对应值是否为真值。

4. CLSX 适合用于对性能敏感的应用吗？
   现有信息没有提供性能测量或支持证据，因此无法据此判断它是否适合此类应用，也无法判断其大小、效率、优化情况或对 React 重新渲染的影响。

5. CLSX 如何提升可读性？
   它可以在一个表达式中组合固定类名和条件类名，相比复杂的字符串拼接，这种写法更容易浏览和维护。