常见代码

<div className={ture ? 'header' : 'header top'}>hello world</div>

在日常React项目开发中，当多个类名是动态渲染时，处理起来就很麻烦

推荐 classnames包

安装命令

npm i classnames --save
//或者
yarn add classnames

引入：import classnames from ‘classnames’;

使用：

逻辑与（&&）可以处理单个类名：
classNames('header',true && top);

对象语法可以处理多个类名：
classNames('类名', { 类名: 条件 });
classNames('header', { top: true }); // => 'header top'
classNames('类名',{ 类名: 条件, 类名: 条件,类名: 条件 });
classNames('header',{ top: true, active: true, select: true });
 
数组形式：
const arr = ['top', { active: true, select: false }];
classNames('header', arr); // => 'header top active'

动态类名：
const className = 'header';`
classNames({ [`top-${className}`]: true }); // => 'top-header'

总结

使用classnames处理动态类名，便于代码维护，适用于React项目。