react 中添加多个class的方法

在写样式的时候，有时候会有公共 class 和 特定 class 组合的形式，这样可以减少 css 的代码量。
给 react 中的元素添加多个 className 的方式有 3 种：
1、使用 classnames 库
npm install classnames --save 安装依赖
import classnames from 'classnames' 引入依赖
使用：

<div className={classnames(styles.signStateStyle, styles.applyCodeStyle)}>预约码</div>
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-applyCodeStyle">预约码</div>

<div className={classnames({ class1: true, class2: false })}>预约码</div>
// <div class="class1">预约码</div>
// true 渲染此class，false 不渲染此class。根据实际情况换成自己的条件。

<div className={classnames('class3', { class1: true, class2: false })}>预约码</div>
// <div class="class3 class1">预约码</div>

<div className={classnames('class3', { class1: true }, { class2: false })}>预约码</div>
// <div class="class3 class1">预约码</div>

2、使用模板字符串拼接

<div className={`${styles.signStateStyle} ${styles.signed}`}>预约码</div>
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-signed">已签约</div>

3、数组拼接

<div className={[styles.signStateStyle, styles.signing].join(' ')}>预约码</div>;
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-signing">签约中</div>