深入掌握classnames

EDIO • 2024-10-24 15:27 • 编程

一、介绍

classNames是一个简洁实用的JavaScript库，用于管理CSS类名。它可以处理各种输入类型，例如字符串、对象数组和嵌套的类名，以及忽略空和错误的输入，非常适用于在React等框架中处理样式。

二、基础用法

classNames包含一个默认导出，可以在代码中使用。最简单的方式是将一个或多个字符串参数传递给它：


import classNames from 'classnames';

const btnClass = classNames('btn', 'btn-primary');
// btnClass = 'btn btn-primary'

上面的代码将创建一个带有字符串”btn”和”btn-primary”的class name，可以将其赋值给React组件的className属性，以便应用这些类。

还可以传递任意数量的参数，而不仅仅是两个：


const btnClass = classNames('btn', 'btn-primary', 'w-100', 'mt-3');
// btnClass = 'btn btn-primary w-100 mt-3'

这里创建了四个字符串类名，并将它们合并为单个字符串。

三、对象参数

除了多个字符串参数之外，还可以传递一个对象参数，将其作为classNames的源。键是类名，值是布尔型，用于控制是否应包括该类名：


const active = true;
const btnClass = classNames('btn', {
  'btn-primary': active,
  'btn-secondary': !active,
});
// btnClass = 'btn btn-primary'

这里的btn类名被默认包含在结果字符串中，但是会根据active变量值，通常在React组件状态中控制的切换为btn-primary或btn-secondary。

对象参数也可以用于添加变量数量的动态类名：


const words = ['foo', 'bar', 'baz'];
const btnClass = classNames('btn', words.map(word => `btn-${word}`));
// btnClass = 'btn btn-foo btn-bar btn-baz'

对象参数可以合并多个对象，包括其他对象参数和普通的字符串参数：


const words = ['foo', 'bar', 'baz'];
const btnClass = classNames({
  'btn-primary': true,
  'btn-group': true,
}, [
  'btn', ...words.map(word => `btn-${word}`),
]);
// btnClass = 'btn-primary btn-group btn btn-foo btn-bar btn-baz'

四、嵌套的classNames

在对象参数中使用嵌套classNames非常有用，在React等框架中特别常见。例如，可以将一个组件或HTML元素的基本类与传递的属性合并：


const props = { className: 'btn btn-secondary' };
const btnClass = classNames(
  'btn-primary',
  props.className,
  { active: true }
);
// btnClass = 'btn btn-secondary btn-primary active'

上面的代码使用了嵌套的classNames，可以看到btn-secondary被保留了下来。

五、支持不同的输入类型

classNames可以处理各种输入类型，主要是字符串、对象和数组。还可以传递其他类型，例如数组对象或其他类型的对象，然后通过递归处理来确保最终为字符串。

例如，如果传递一个数组作为参数，classNames将递归处理数组中的每个元素：


const words = ['foo', ['bar', { baz: true }]];
const btnClass = classNames('btn', words, { active: true });
// btnClass = 'btn foo bar baz active'

上面的代码将处理使用了一些嵌套数组和对象的简单示例，结果字符串包含所有的class名称。

六、忽略错误的输入

classNames可以处理创建数组和对象的错误输入，例如空字符串、null或undefined。这些值被自动忽略并从结果字符串中删除，以便生成干净和可读的输出。

例如，如果传递一个空字符串，它将被自动忽略：


const btnClass = classNames('btn', '');
// btnClass = 'btn'

这里没有output任何额外的字符串，仅仅是一个简单的’btn’。

七、结论

classList是一种非常有用的样式管理工具，可以帮助我们管理CSS样式的复杂性，尤其适用于React等框架。以上是有关classNames的介绍和详细指南。希望这篇文章能够帮助你更好地掌握它，并提高你的开发能力。

原创文章，作者：EDIO，如若转载，请注明出处：https://www.506064.com/n/144153.html