Concat

不需要花哨，我使用CSS模块，这很容易

import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

这将导致:

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

换句话说，两种风格都有

条件

同样的想法也可以用在“如果”上

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

<div className={class1 + ' ' + style.style2} />

ES6

在过去的一年左右，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常有表现力，易于阅读:

`${class1} anotherClass ${class1}`

你可以使用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>

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

姗姗来迟，但为什么要用第三方来解决这么简单的问题呢?

你可以像@Huw Davies提到的那样——最好的方法

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

两者都很好。但对于大型应用程序来说，编写可能会变得复杂。为了使其达到最佳效果，我做了上面相同的事情，但将其放在一个helper类中

使用下面的helper函数，可以让我保持逻辑独立，以便将来编辑，还提供了多种方式来添加类

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

or

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

下面是我的辅助函数。我把它放在help .js中，我把所有常用方法都放在那里。这样一个简单的功能，我避免使用第三方来保持控制

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}

香草JS

不需要外部库-只需使用ES6模板字符串:

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>

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

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

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

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