在React项目中使用clsx

辰火流光
2,527 阅读5分钟

在Web开发中，我们经常需要根据一些特定条件来动态地改变元素的样式类，因此合并样式类成为了一个常见的需求。本文将介绍如何在React和TypeScript项目中使用clsx，这是一个非常轻量级的JavaScript库，专门用于处理这种需求。在本文中，你将学习到如何安装和引入clsx，以及如何根据不同的情况来使用clsx快速有效地生成你需要的样式类字符串。此外，我们还将比较clsx和classnames这两个库的优缺点，帮助你更好地理解为什么更多的开发者开始选择clsx。

在React开发中，经常需要根据某些条件动态地合并多个CSS类。例如，可能会根据一个开关状态来决定一个按钮应该展示正常的样式还是被按下的样式。为了满足这种需求，通常会写出类似这样的代码：

let buttonClass = 'btn';
if (this.state.isPressed) {
  buttonClass += ' btn-pressed';
} else {
  buttonClass += ' btn-normal';
}

这种方式虽然能够达到目的，但在面对更为复杂的情况时就显得有力不从心。此时，就可以使用npm中的一个轻量级工具——clsx，它可以帮助我们更方便地处理这种问题。

安装clsx

首先，需要在项目中安装clsx。打开终端，进入项目文件夹，然后输入以下命令：

npm install --save clsx

在项目中引入clsx

在需要使用的文件中，通过下面的方式引入：

import clsx from 'clsx';

使用clsx

在引入了clsx之后，就可以开始使用它来动态生成className了。

案例1：短路运算符&&

import clsx from 'clsx'

interface ButtonProps {
  isActive: boolean
}

const Button = ({ isActive }: ButtonProps) => {
  const className = clsx('btn', isActive && 'btn-active')

  return <button className={className}>辰火流光</button>
}

const Demo = () => {
  return (
    <>
      <Button isActive={true} />
      <Button isActive={false} />
    </>
  )
}
export default Demo

通过这样的方式，当isActive为true时，className将会是'btn btn-active'。如果isActive为false，className将会是'btn'。

image.png

案例2：对象表达式

也可以使用对象的方式来使用clsx，对象的每个键值代表一个类名，值则表示这个类名是否应该被包含在结果中。

import clsx from 'clsx'

interface ButtonProps {
  isActive: boolean
  isError: boolean
}

const Button = ({ isActive, isError }: ButtonProps) => {
  const className = clsx({
    btn: true,
    'btn-active': isActive,
    'btn-error': isError
  })

  return <button className={className}>辰火流光</button>
}

const Demo = () => {
  return (
    <>
      <Button isActive={true} isError={true} />
      <Button isActive={false} isError={false} />
    </>
  )
}
export default Demo

image.png

处理复杂的逻辑

甚至可以同时使用布尔型和对象型，来应对更为复杂的情况。

import clsx from 'clsx'

interface ButtonProps {
  isActive: boolean
  isError: boolean
}
const Button = ({ isActive, isError }: ButtonProps) => {
  const className = clsx('btn', {
    'btn-active': isActive,
    'btn-error': isError
  })

  return <button className={className}>辰火流光</button>
}

const Demo = () => {
  return (
    <>
      <Button isActive={true} isError={true} />
      <Button isActive={false} isError={false} />
    </>
  )
}
export default Demo

image.png

CSS Modules与clsx结合

当我们使用 CSS Modules 时，可以有效避免全局样式冲突，但同时也引入了动态类名的问题。与 clsx 结合使用，我们可以轻松地解决这一问题。

案例 1：基础结合

假设有如下的 CSS Module 文件 Button.module.css:

/* Button.module.css */
.btn {
  padding: 8px 16px;
  border: none;
  background-color: #1a1a1a;
  color: white;
}
.active {
  background-color: #0044ff;
}
.disabled {
  background-color: #aaaaaa;
}

在React组件中使用 Button.module.css：

import clsx from 'clsx'
import Styles from './Button.module.css'

interface ButtonProps {
  isActive: boolean
  isDisabled: boolean
}

const Button = ({ isActive, isDisabled }: ButtonProps) => {
  // 使用clsx结合CSS Modules
  const buttonClasses = clsx(Styles.btn, {
    [Styles.active]: isActive,
    [Styles.disabled]: isDisabled
  })

  return <button className={buttonClasses}>辰火流光</button>
}

const Demo = () => {
  return (
    <>
      <Button isActive={true} isDisabled={false} />
      <Button isActive={false} isDisabled={true} />
      <Button isActive={false} isDisabled={false} />
    </>
  )
}
export default Demo

动画.gif

案例 2：根据props动态添加多个类名

假设有如下的 CSS Module 文件 Button.module.css:

/* Button.module.css */
.btn {
  border: none;
}
.large {
  padding: 16px 32px;
}
.small{
  padding: 4px 8px;
}
.primary{
  background-color: #ffc600;
  color: #1a1a1a;
}
.secondary{
  background-color: #1a1a1a;
  color: #ffc600;
}

页面代码为：

import clsx from 'clsx'
import Styles from './Button.module.css'

interface ButtonProps {
  size: 'large' | 'small'
  variant: 'primary' | 'secondary'
}

const Button = ({ size, variant }: ButtonProps) => {
  const buttonClasses = clsx(Styles.btn, {
    [Styles.large]: size === 'large',
    [Styles.small]: size === 'small',
    [Styles.primary]: variant === 'primary',
    [Styles.secondary]: variant === 'secondary'
  })

  return <button className={buttonClasses}>辰火流光</button>
}

const Demo = () => {
  return (
    <>
      <Button size='large' variant='primary' />
      <Button size='small' variant='secondary' />
    </>
  )
}
export default Demo

动画.gif

示例 3：与外部样式合并

有时候你可能需要把CSS Module和外部传入的样式结合起来，如下示例所示：

import clsx from 'clsx'
import Styles from './Button.module.css'
import React from 'react'

interface ButtonProps {
  className?: string
  children: React.ReactNode
}

const Button = ({ className, children }: ButtonProps) => {
  // clsx可以接收其他类名作为参数，与内部类名进行合并
  const buttonClasses = clsx(Styles.btn, className)

  return <button className={buttonClasses}>{children}</button>
}

const Demo = () => {
  return (
    <>
      <Button className={Styles.active}>辰火流光</Button>
      <Button className={Styles.disabled}>辰火流光</Button>
    </>
  )
}
export default Demo

动画.gif

clsx vs classnames

比较clsx与classnames优势：

  1. 轻量级：clsx非常小巧，只有239字节的体积（压缩后），这比许多类似的工具包都要小，意味着它几乎不会增加你的项目体积。

  2. 性能优化：clsx经过了优化，以确保在运行时具有很高的性能。即便在需要处理大量类名的复杂情况下，clsx也能快速生成结果，这在对性能有严格要求的项目中极为有价值。

  3. 使用简单：clsx提供了非常直观的API，支持多种使用方式，包括字符串、对象及数组等方式来声明类名。这使得开发者可以根据自己的喜好或特定需求灵活选择，同时保持代码的清晰与简洁。

  4. TypeScript支持：clsx与TypeScript兼容，在使用TypeScript的项目中可以提供类型检查，帮助开发者更加安全地重构和维护代码。

  5. 通用性：虽然clsx经常在React项目中使用，但其纯粹的函数特性使它能在任何JavaScript或TypeScript项目中使用，不限于React。这种灵活性让clsx可以应用于多种不同的场景。

相比之下，classnames虽然也是一个流行的工具库，用于在JavaScript中条件性地合并类名，但在某些性能方面或体积上可能不如clsx。虽然在功能上classnames和clsx相似，clsx为了达到更好的性能和体积优化，采用了更现代的JavaScript特性和编程技巧。

总结

通过上文的学习，相信你已经对clsx有了全面深入的了解。无论在React还是TypeScript项目中，clsx都能够以简洁高效的方式帮助你处理动态样式类的问题。与classnames相比，clsx具有更小的体积、更高的性能、更方便的API、更好的TypeScript支持以及更广的适用范围。因此，无论你是正在寻求一个处理样式类的工具，还是已经在使用classnames但对其有所不满，都可以考虑尝试使用clsx。希望本文能够对你的日常开发工作提供帮助，如果你在使用过程中遇到任何问题，都欢迎在评论区提出，我们会尽快为你解答。

avatar
文章
阅读
粉丝