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

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

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}`

只需使用JavaScript。

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

如果你想在对象中添加基于类的键和值，你可以使用以下方法:

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

或者更简单:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />

我使用了这个语法

    <div
      className={[
        "d-inline-flex justify-content-center align-items-center ",
        withWrapper && `ft-icon-wrapper ft-icon-wrapper-${size}`,
        wrapperClass,
      ].join(" ")}
    >
      <img
        className={`ft-icon ft-icon-${size} ${iconClass}`}
        alt={id}
        src={icon}
      />
    </div>

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

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

一般来说，人们喜欢

<div className={  `head ${style.class1} ${Style.class2}`  }><div>

OR

<div className={  'head ' + style.class1 + ' ' + Style.class2 }><div>

OR

<div className={  ['head', style.class1 , Style.class2].join(' ')  }><div>

但是您可以选择创建一个函数来完成这项工作

function joinAll(...classes) {
  return classes.join(" ")
}

然后叫它:-

<div className={joinAll('head', style.class1 , style.class2)}><div>