添加多个类名可以使用：
先导入css modules

import styles from './style.module.css'
// 第1种 直接加上一个空格的字符串
className={style.name0ne + ' ' + style.nameTwo}
// 第2种 数组用逗号隔开，然后用join(' ')替换成空格
 className={[style.name0ne, style.nameTwo].join(' ')}
// 第3种 直接使用模板字符串
 className={`${style.name0ne} ${style.nameTwo}`}
如果类名为一个变量，可用（用中括号[]将变量包裹起来）
 
// 第1种 直接加上一个空格的字符串
className={style.name0ne + ' ' + style[nameVar]}
// 第2种 数组用逗号隔开，然后用join(' ')替换成空格
 className={[style.name0ne, style[nameVar]].join(' ')}
// 第3种 直接使用模板字符串
 className={`${style.name0ne} ${style[nameVar]}`}
                    react中动态添加类名className(css modules)添加多个类名可以使用：// 第1种 直接加上一个空格的字符串className={style.name0ne + ' ' + style.nameTwo}// 第2种 数组用逗号隔开，然后用join(' ')替换成空格 className={[style.name0ne, style.nameTwo].join(' ')}// 第3种 直接使用模板字符串 className={`${style.name0ne} ${style
允许使用指定 className 的纯字符串创建元素
支持在没有 JSX 的情况下使用 React - 这是一个有趣的库的不幸污点。 使用此模块，您可以非常简洁地呈现只有className结构元素（比 JSX 更是如此）。
 npm install dre-react-classname --save
它是一个 commonJS 模块，所以你require它。 如果你正在使用新的 ES6 转译，你可以这样做来导入你想要渲染的特定元素： 
 import { div, span } from "dre-react-classname"
然后你可以在你的render函数中使用它们： 
 return div("foo", span("bar"));
这里， foo和span是 CSS 类名。 它们会自动展开，因此上面的内容等效于： 
 return div({ cl
				
前端踩坑(八)--------------------------react 动态操作className
文章目录前端踩坑(八)--------------------------react 动态操作className问题描述：如何动态修改一个元素的CSS样式呢？一 , react 动态操作className二 , 设置多个className三 这是您如何使用react定义和使用内联样式的方法
				
一、React动态添加类名
已知变量：value = { class: 'class1', class2: 'class2', value: '你好' }，想得到结果如下：
<div class="class1 class2">你好</div>
    实现方式如下：
// React实现  双类名/多类名
// 常用
// （字符串写法）
				
要说到react绑定className，先要了解为何react用的是className，不像其它语言都是用class？这是因为class是JavaScript中的保留关键字，而JSX是JavaScript的扩展。这就是React不使用class而使用className的主要原因
常规的绑定
<div className="title">标题</div>
动态绑定cla...
您可以使用react-html-classes作为react组件的装饰器。 
 import React , { Component } from 'react'
import style , { StyleProps } from 'react-html-classes'
// default class names
const styles = {
  root : 'root'
@ style ( styles )
class Root extends Component < StyleProps>> {
  render ( ) {
本身存在一个class还需要动态绑定class
	只需要动态绑定class，去其他样式
第一种情况，div标签本身有class，另外需动态添加一个.show的className，来判断是否显示内容：
// 两种写法
<div className={['container', this.state.isShow ? 's
1.在react中想要动态添加className时，通过就会使用classnames这个库。
二，使用方法
1.引入classnames: import classnames from classnames。
2.classnames是一个函数，使用的形式较多，记住通常使用方法即可：
（1）传入一个对象：classnames({class1:true,class2:false}) ，true表示相应的class生效，反之false表示不生效。
（2）接受多个类名：classnames(class1
<div class="class1 class2">HELLO WORLD</div>
但是如果你在jsx文件里，通过import的形式引入的less，那么就不能这么写了，那么这时候想实现上面的效果怎么办，如下
React实现  双类名/多类名
// React实现  双类名/多类名
import styles from './styles.less';
// 常用
// （字符串写法）
截至2018年8月18日，此项目已折旧且未维护。
 在React版本0.13.0中，已React.addons.classSet ；在React版本4.0中，已从React软件包中删除了附加组件。
 我建议使用包作为替代。
通过允许指定基类，该模块为React中的添加了附加功能。
当表达式为true时，此组件将始终以.foo基类呈现，并具有.bar和.baz的类。
 render: function() {
  var classes = this.getClass('foo', {
    'bar': this.props.bar === true,
    'baz': this.props.baz === true
  return (
    <div className={classes}></div>
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JS
托管的演示：  : 
 您也可以在本地运行演示。 开始： 
git clone git@github.com:brianmcallister/react-auto-scroll.git
cd react-auto-scroll/demo
npm i
# Optionally link libraries for local development
npm link @brianmcallister/react-auto-scroll
npm link ../node_modules/react
npm start
npm install @brianmcallister/react-auto-scroll
如：show为真时，才添加 ‘hidden’ 类
<div className={
	['warehouse',(show)&&'hidden'].filter(Boolean).join('  ')}>
弊端：如果很多动态类的时候，写法很不优雅，不易于维护，可读性差等...
				
外部引用需要使用className，react默认不支持class。
如果想使用传统的class来获取样式，需要下载安装react-html-attrs插件。
npm install babel-plugin-react-html-attrs --save-dev
function MyComponent({ isActive, isHighlighted }) {
  // 定义基础类名
  let className = 'my-component';
  // 根据条件动态添加类名
  if (isActive) {
    className += ' active';
  if (isHighlighted) {
    className += ' highlighted';
  return <div className={className}>Hello, World!</div>;
在上面的例子中，我们首先定义了一个基础的类名 `my-component`。然后根据 `isActive` 和 `isHighlighted` 的值来决定是否添加额外的类名。
另一种常见的方式是使用数组和模板字符串来动态绑定多个类名：
```jsx
import React from 'react';
function MyComponent({ isActive, isHighlighted }) {
  // 定义类名数组
  let classNames = ['my-component'];
  // 根据条件动态添加类名
  if (isActive) {
    classNames.push('active');
  if (isHighlighted) {
    classNames.push('highlighted');
  return <div className={classNames.join(' ')}>Hello, World!</div>;
在这个例子中，我们首先定义了一个包含基础类名的数组 `['my-component']`。然后根据条件使用 `push` 方法将额外的类名添加到数组中。最后，我们使用 `join` 方法将数组转换为字符串，并用空格分隔每个类名。
无论是哪种方式，最终都可以将动态生成的类名通过 `className` 属性绑定到相应的元素上。