Come aggiungere più classi a un componente ReactJS

Sono nuovo di ReactJS e JSX e sto riscontrando un piccolo problema con il codice seguente.

Sto cercando di aggiungere più classi classNameall'attributo su ciascuna li:

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

Il mio componente React è:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },

  clicked: function(index) {
    this.setState({ focused: index });
  },

  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});

ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));

Uso i nomi di classe quando è necessaria una discreta quantità di logica per decidere (non) utilizzare le classi. Un esempio troppo semplice :

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

Detto questo, se non si desidera includere una dipendenza, ci sono risposte migliori di seguito.

Uso ES6 letterali template . Per esempio:

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

E poi basta renderlo:

<input className={classes} />

Versione a una fodera:

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

Usa JavaScript.

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

Se si desidera aggiungere chiavi e valori basati su classi in un oggetto, è possibile utilizzare quanto segue:

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

O ancora più semplice:

const isEnabled = true;
const isChecked = false;

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

concat

Non c'è bisogno di essere fantasiosi, sto usando i moduli CSS ed è facile

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

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

Ciò comporterà:

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

In altre parole, entrambi gli stili

Condizionali

Sarebbe facile usare la stessa idea con if's

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

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

Ciò può essere ottenuto con i template letterali ES6:

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

Puoi creare un elemento con più nomi di classe come questo:

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

Naturalmente, puoi usare una stringa contenente i nomi delle classi e manipolare questa stringa per aggiornare i nomi delle classi dell'elemento.

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

Ecco come puoi farlo con ES6:

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

Puoi elencare più classi e condizioni e puoi anche includere classi statiche. Non è necessario aggiungere una libreria aggiuntiva.

In bocca al lupo ;)

Vanilla JS

Non sono necessarie librerie esterne: basta usare le stringhe di modello ES6 :

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

Forse i nomi delle classi possono aiutarti.

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

Non penso che dobbiamo usare un pacchetto esterno per aggiungere solo più classi.

Io personalmente uso

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

o

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

il secondo nel caso in cui sia necessario aggiungere o rimuovere le classi in modo condizionale.

Solo aggiungendo, possiamo filtrare le stringhe vuote.

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

Puoi creare un elemento con più nomi di classe come questo, ci ho provato in entrambi i modi, funziona benissimo ...

Se si importa un CSS, è possibile seguire questa procedura: Modo 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>
    );
  }
}

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

**

Se si applica CSS come interno:

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>

Puoi fare quanto segue:

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

Una soluzione breve e semplice, spero che questo aiuti.

Può essere fatto con https://www.npmjs.com/package/clsx :

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

Prima installalo:

npm install --save clsx

Quindi importalo nel tuo file componente:

import clsx from  'clsx';

Quindi utilizzare la funzione importata nel componente:

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

In ritardo alla festa, ma perché usare terze parti per un problema così semplice?

Puoi farlo come menzionato da @Huw Davies - il modo migliore

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

Entrambi sono buoni. Ma la scrittura può diventare complessa per un'app di grandi dimensioni. Per renderlo ottimale, faccio le stesse cose sopra ma lo metto in una classe di aiuto

Usando la mia funzione di aiuto di seguito, mi consente di mantenere la logica separata per le modifiche future e mi dà anche diversi modi per aggiungere le classi

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

o

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

Questa è la mia funzione di aiuto di seguito. L'ho messo in un helper.js dove tengo tutti i miei metodi comuni. Essendo una funzione così semplice, ho evitato di usare terze parti per mantenere il controllo

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

È possibile utilizzare le matrici e quindi unirle usando lo spazio.

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

Ciò comporterà:

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

So che questa è una risposta tardiva, ma spero che questo possa aiutare qualcuno.

Considera che hai definito le seguenti classi in un file css ' primary ', ' font-i ', ' font-xl '

• Il primo passo sarebbe importare il file CSS.
• Poi

<h3 class = {` ${'primary'} ${'font-i'} font-xl`}> HELLO WORLD </h3>

farebbe il trucco!

Per maggiori informazioni: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20

per l'aggiunta di più classi

... className={`${classes.hello} ${classes.hello1}`...

Utilizzando l'esempio di TodoTextInput.js di 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} />
    )
  } 

la sostituzione dei nomi di classe con un semplice codice js alla vaniglia avrà questo aspetto:

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

Se non hai voglia di importare un altro modulo, questa funzione funziona come il classNamesmodulo.

function classNames(rules) {
    var classes = ''

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

    return classes
} 

Puoi usarlo in questo modo:

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

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

Questo è ciò che faccio:

Componente:

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

Componente chiamante:

<Button className = 'hashButton free anotherClass' />

Sto usando React 16.6.3 e @Material UI 3.5.1 ed è in grado di usare array in className come className={[classes.tableCell, classes.capitalize]}

Quindi nel tuo esempio, il seguente sarebbe simile.

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

Usa https://www.npmjs.com/package/classnames

import classNames da 'classnames';

1. Può utilizzare più classi utilizzando le virgole separate:

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

2. Può usare più classi usando le virgole separate con condizione:

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

Anche l'uso dell'array come oggetti di scena per classNames funzionerà, ma avverte ad es

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

Uso il pacchetto rc-classnames .

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

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

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

Puoi aggiungere classi in qualsiasi formato (Array, Object, Argument). Tutti i valori di verità da matrici o Argomenti più chiavi in ​​oggetti ugualitrue unire insieme.

per esempio:

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

I bind classNamesnel modulo CSS importato nel componente.

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

classnamesdà la possibilità di dichiarare classNameun elemento React in modo dichiarativo.

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

Di solito lo uso così: (nel tuo caso)

    <li  key={index} className={
        "component " +
        `${activeClass? activeClass: " not-an-active-class "}` +
        `${data.class? " " + data.class : " no-data-class "}`
   } />

Quando si tratta di JSX e (di solito) abbiamo un po 'di json ... di quello che si fa in loop ... componente . mappa , oltre ad alcuni condizionale per verificare se esiste la proprietà json per rendere il nome della classe in base al valore della proprietà da JSON. Nell'esempio seguente component_color e component_dark_shade sono proprietà di component.map ()

   <div className={
        "component " +
        `${component_color? component_color: " no-color "}` +
        `${component_dark_shade? " " + component_dark_shade : " light "}`
   }/>

Output: <div class="component no-color light" .... Oppure: a <div class="component blue dark" ....seconda dei valori dalla mappa ...

Quando ho molte classi diverse, ho trovato utile quanto segue.

Il filtro rimuove qualsiasi nullvalore e il join inserisce tutti i valori rimanenti in una stringa separata da spazio.

const buttonClasses = [
    "Button", 
    disabled ? "disabled" : null,
    active ? "active" : null
].filter((class) => class).join(" ")

<button className={buttonClasses} onClick={onClick} disabled={disabled ? disabled : false}>