So fügen Sie einer ReactJS-Komponente mehrere Klassen hinzu

Ich verwende ES6Vorlagenliterale . Zum Beispiel:

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

Und dann einfach rendern:

<input className={classes} />

Einliner-Version:

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

Verwenden Sie einfach JavaScript.

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

Wenn Sie einem Objekt Klassen-basierte Schlüssel und Werte hinzufügen möchten, können Sie Folgendes verwenden:

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

Oder noch einfacher:

const isEnabled = true;
const isChecked = false;

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

Concat

Keine Notwendigkeit, ausgefallen zu sein, ich verwende CSS-Module und es ist einfach

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

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

Dies führt zu:

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

Mit anderen Worten, beide Stile

Dies kann mit ES6-Vorlagenliteralen erreicht werden:

<input className={`class1 ${class2}`}>

Sie können ein Element mit mehreren Klassennamen wie folgt erstellen:

<li className="class1 class2 class3">foo</li>

Natürlich können Sie eine Zeichenfolge verwenden, die die Klassennamen enthält, und diese Zeichenfolge bearbeiten, um die Klassennamen des Elements zu aktualisieren.

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>

So können Sie das mit ES6 machen:

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

Sie können mehrere Klassen und Bedingungen auflisten und statische Klassen hinzufügen. Es ist nicht notwendig, eine zusätzliche Bibliothek hinzuzufügen.

Viel Glück ;)

Vanille JS 

Keine externen Bibliotheken erforderlich - verwenden Sie einfach ES6 template strings :

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

Vielleicht kann classnames Ihnen helfen.

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'

Durch das Hinzufügen können wir leere Zeichenfolgen herausfiltern.

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}

Verspätet zur Party, aber warum sollte man sich für ein so einfaches Problem an Dritte wenden?

Man könnte es entweder als @Huw Davies erwähnen - am besten

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(' ')}

Beide sind gut. Das Schreiben kann jedoch für eine große App komplex werden. Um es optimal zu machen, mache ich dasselbe oben, aber stelle es in eine Hilfsklasse

Wenn Sie die unten abgebildete Hilfsfunktion verwenden, kann ich die Logik für die spätere Bearbeitung getrennt halten. Außerdem gibt es mehrere Möglichkeiten, die Klassen hinzuzufügen

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

oder

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

Dies ist meine Helferfunktion unten. Ich habe es in eine helper.js gestellt, in der ich alle meine üblichen Methoden einhalte. Da es sich um eine so einfache Funktion handelt, habe ich es vermieden, die Kontrolle über Dritte zu behalten

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

Ich glaube nicht, dass wir ein externes Paket verwenden müssen, um nur mehrere Klassen hinzuzufügen.

Ich persönlich benutze

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

die zweite für den Fall, dass Sie Klassen bedingt hinzufügen oder entfernen müssen.

Wenn Sie kein anderes Modul importieren möchten, funktioniert diese Funktion wie das Modul classNames.

function classNames(rules) {
    var classes = ''

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

    return classes
} 

Sie können es so verwenden:

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

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

Verwenden Sie https://www.npmjs.com/package/classnames

importiere Klassennamen aus 'Klassennamen';

1. Kann mehrere Klassen mit getrennten Kommas verwenden:

   <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>
   

2. Kann mehrere Klassen mit durch Bedingung getrennten Kommas verwenden:

   <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li> 
   

Die Verwendung von Array als Requisiten für Klassennamen funktioniert ebenfalls, gibt jedoch eine Warnung aus, z.

className={[classes.tableCellLabel, classes.tableCell]}

Verwenden des TodoTextInput.js-Beispiels von facebook

render() {
    return (
      <input className={
        classnames({
          edit: this.props.editing,
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  } 

classnames durch einfachen Vanilla-js-Code zu ersetzen, sieht folgendermaßen aus:

render() {
    return (
      <input
        className={`
          ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''}
        `}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }

Sie können ein Element mit mehreren Klassennamen wie folgt erstellen. Ich habe es in beide Richtungen versucht. Es funktioniert einwandfrei.

Wenn Sie CSS importieren, können Sie folgendermaßen vorgehen: Weg 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>
    );
  }
}

Weg 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>
    );
  }
}

**

Wenn Sie CSS als interne anwenden:

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>

Ich bindclassNames des in die Komponente importierten css-Moduls.

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles); 

classnames gibt die Möglichkeit, className deklarativ für ein React-Element zu deklarieren.

ex: 

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

Ich verwende React 16.6.3 und @Material UI 3.5.1 und kann Arrays in className wie className={[classes.tableCell, classes.capitalize]} verwenden

In Ihrem Beispiel wäre das Folgende ähnlich.

<li key={index} className={[activeClass, data.class, "main-class"]}></li>

für weitere Klassen wird className = {${classes.hello} ${classes.hello1} hinzugefügt.

Das ist, was ich tue:

Komponente:

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

Aufrufende Komponente:

<Button className = 'hashButton free anotherClass' />

Ich benutze rc-classnames package. 

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

Sie können Klassen in jedem Format (Array, Object, Argument) hinzufügen. Alle wahrheitsgemäßen Werte von Arrays oder Argumenten sowie Schlüssel in Objekten, die true entsprechen, werden zusammengeführt. 

zum Beispiel:

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"