clsx 库如何使用

示例

假设我们有一个用户卡片组件，它可以显示为正常、高亮或禁用状态。基于这些状态，卡片的样式类将会改变。

使用 clsx，我们可以轻松地构建这个组件的类名。

import clsx from 'clsx';

function UserCard({ highlighted, disabled, username }) {
  const className = clsx('user-card', {
    'highlighted': highlighted,
    'disabled': disabled,
    'normal': !highlighted && !disabled
  });

  return <div className={className}>{username}</div>;
}

在上述例子中：

1. 如果 highlighted 属性为 true，类名将包括 highlighted。
2. 如果 disabled 属性为 true，类名将包括 disabled。
3. 如果都不是 highlighted 和 disabled，类名将包括 normal。

所以，当你这样使用组件：

<UserCard highlighted={true} username="Alice" />

生成的 HTML 将是：

<div class="user-card highlighted">Alice</div>

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

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

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