React添加动态类名写法 推荐 classnames 这个库

欢迎关注微信公众号：【 全栈攻略 】

在React实际项目开发中，我们通常会遇到给标签添加动态类的需求

常规写法：

如：show为真时，才添加 ‘hidden’ 类

<div className={
	['warehouse',(show)&&'hidden'].filter(Boolean).join('  ')}>

 /div>

弊端：如果很多动态类的时候，写法很不优雅，不易于维护，可读性差等

所以，推荐 classnames 这个库

安装

npm install classnames --save

引入

import classnames from ‘classnames’;

classnames 版等写法：

一样，show为真时，才添加 ‘hidden’ 类

<div className={
	classnames('warehouse', { hidden: show })}>
</div>

PS：未来的你，一定会感谢今天拼命努力的自己！