你可以像这样创建一个具有多个类名的元素，我尝试了这两种方式，工作正常…

如果你导入任何css，那么你可以这样做: 方式1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

方式2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

If you applying css as internal : const myStyle = { color: "#fff" }; // React Element using Jsx const myReactElement = ( <h1 style={myStyle} className="myClassName myClassName1"> Hello World! </h1> ); ReactDOM.render(myReactElement, document.getElementById("app")); .myClassName { background-color: #333; padding: 10px; } .myClassName1{ border: 2px solid #000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script> <div id="app"> </div>

我使用ES6模板文字。例如:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

然后渲染它:

<input className={classes} />

一行程序版本:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

我认为我们不需要使用一个外部包来添加多个类。

我个人使用

<li className={`li active`}>Stacy</li>

or

<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

or

<li className={'li ' + (this.state.isActive ? 'active' : '') }>Stacy<li>

第二个和第三个，以防您需要有条件地添加或删除类。

这似乎对我有用

<Link className={[classes.button, classes.buttonFirst]}>

你可以使用react-directive，它支持所有的react元素，甚至支持dirIf, dirShow, dirFor和扩展的className等指令

你可以这样做:

import { useState } from 'react'
import directive from 'react-directive';

function Component() {
  const [isActive, setIsActive] = useState(true);
  const [isDisabled, setIsDisabled] = useState(false);

  return <directive.div className={{isActive, isDisabled}}>Contents</directive.div>;
}
// Renders <div class="isActive">Contents</div>

您甚至可以提供一些依赖项，以便在发生任何更改时重新计算类名。 我是图书馆的作者。

使用CSS模块(或Sass模块)，你也可以把你的样式隔离到一个特定的组件。

“组件范围的CSS允许你用最小的副作用编写传统的、可移植的CSS:不用担心选择器名称冲突或影响其他组件的样式。”

import * as styles from "./whatever.module.css"  // css version
import * as styles from "./whatever.module.scss" // sass version

<div className={`${styles.class1} ${styles.class2}`}>
   INSERT YOUR CODE HERE
</div>

Ref1 Ref2