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 types

classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored

classNames(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>