classnames工具库：让你的动态多class类组合更加艺术！

本文主要是介绍classnames工具库：让你的动态多class类组合更加艺术！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

最近在学习React当中，学习到了一个叫做classnames的工具库，可以简化我们写动态多class类名的开发。

定义

classnames 简单的说就是一个把多个className链接起来的工具

安装

npm i classnames

引入

import classnames from 'classnames'

使用

格式: classnames(‘参数一’, ‘参数二’, …)

classNames('foo', { bar: true }); // => 'foo bar'classNames({ 'foo-bar': true }); // => 'foo-bar'classNames({ 'foo-bar': false }); // => ''classNames({ foo: true }, { bar: true }); // => 'foo bar'classNames({ foo: true, bar: true }); // => 'foo bar'// lots of arguments of various typesclassNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'// other falsy values are just ignoredclassNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

案例

旧写法：不使用classnames工具库

<li className="nav-sort">{/* 高亮类名： active */}{tabs.map(item => (<span key={item.type} onClick={() => handleTabChange(item.type)} className={`nav-item ${type === item.type && 'active'}`}>{item.text}</span>))}</li>

使用classnames工具库

<li className="nav-sort">{/* 高亮类名： active */}{tabs.map(item => (<span key={item.type} onClick={() => handleTabChange(item.type)} className={classnames("nav-item", { active: type === item.type })}>{item.text}</span>))}</li>