我就是这么做的:

组件:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

调用组件:

<Button className = 'hashButton free anotherClass' />

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

如果你导入任何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>

可以通过https://www.npmjs.com/package/clsx来完成:

https://www.npmjs.com/package/clsx

首先安装它:

npm install --save clsx

然后将它导入到组件文件中:

import clsx from  'clsx';

然后在组件中使用导入的函数:

<div className={ clsx(classes.class1, classes.class2)}>

使用字符串连接来连接CSS类是个坏主意。在很多情况下，这是非常令人困惑和压倒性的。最好添加一些简单的帮助器，将所有这些连接到一个字符串中。这里有一个例子:

import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
/**
 * Helper function for conditionally creating css class strings.
 *
 * Example usage:
 *   classNames('foo', ['bar', ''], { baz: false, bob: true });
 *   => 'foo bar bob'
 *
 * @module helpers/classNames
 * @param {...(String|String[]|Object)} args
 * @returns {String}
 */
export default function classNames(...args) {
  const classes = [];
  for (const arg of args) {
    if (arg !== null && typeof arg !== 'undefined') {
        if (isString(arg)) {
          classes.push(arg);
        } else if (Array.isArray(arg)) {
          classes.push(classNames(...arg));
        } else if (isObject(arg)) {
          classes.push(classNames(...Object.keys(arg).filter(k => arg[k])));
        }
    }
  }
  return classes.join(' ');
}

(来自https://tomsoir.medium.com/react-css-classnames-concatenation-pattern-fd0fa1f31143)

只需将join(' ')函数与空格链接到数组，例如:

<p className={['alert','red',condIsTrue ? 'up' : 'down'].join(' ')}>something...</p>

如果您不想导入另一个模块，此函数的工作方式与classNames模块类似。

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
} 

你可以这样使用它:

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}