Como adicionar várias classes a um componente ReactJS

Eu sou novo no ReactJS e JSX e estou tendo um pequeno problema com o código abaixo.

Estou tentando adicionar várias classes ao classNameatributo em cada um li:

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

Meu 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 nomes de classe quando há uma quantidade razoável de lógica necessária para decidir (não) o uso das classes. Um exemplo excessivamente simples :

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

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

Dito isto, se você não deseja incluir uma dependência, há respostas melhores abaixo.

Eu uso ES6 literais de modelo . Por exemplo:

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

E então apenas renderize:

<input className={classes} />

Versão de uma linha:

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

Basta usar o JavaScript.

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

Se você deseja adicionar chaves e valores baseados em classes em um objeto, pode usar o seguinte:

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

Ou ainda mais simples:

const isEnabled = true;
const isChecked = false;

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

Concat

Não precisa ser extravagante, estou usando módulos CSS e é fácil

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

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

Isso resultará em:

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

Em outras palavras, ambos os estilos

Condicionais

Seria fácil usar a mesma idéia com if's

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

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

Isso pode ser alcançado com os literais do modelo ES6:

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

Você pode criar um elemento com vários nomes de classe como este:

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

Naturalmente, você pode usar uma sequência contendo os nomes das classes e manipulá-las para atualizar os nomes das classes do elemento.

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

É assim que você pode fazer isso com o ES6:

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

Você pode listar várias classes e condições e também pode incluir classes estáticas. Não é necessário adicionar uma biblioteca adicional.

Boa sorte ;)

JS de baunilha

Não há necessidade de bibliotecas externas - basta usar as strings de modelo ES6 :

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

Talvez os nomes de classe possam ajudá-lo.

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

Eu não acho que precisamos usar um pacote externo apenas para adicionar várias classes.

Eu pessoalmente uso

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

ou

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

o segundo caso você precise adicionar ou remover classes condicionalmente.

Apenas adicionando, podemos filtrar as strings vazias.

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

Você pode criar um elemento com vários nomes de classe como este, tentei isso nos dois sentidos, está funcionando bem ...

Se você estiver importando algum css, poderá seguir este caminho: Caminho 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>
    );
  }
}

caminho 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 você estiver aplicando css como 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>

Você pode fazer o seguinte:

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

Uma solução curta e simples, espero que ajude.

Isso pode ser feito com https://www.npmjs.com/package/clsx :

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

Primeiro instale-o:

npm install --save clsx

Em seguida, importe-o no seu arquivo de componente:

import clsx from  'clsx';

Em seguida, use a função importada no seu componente:

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

Tarde para a festa, mas por que usar terceiros para um problema tão simples?

Você poderia fazê-lo como @Huw Davies mencionou - a melhor maneira

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

Ambos são bons. Mas a escrita pode se tornar complexa para um aplicativo grande. Para torná-lo ideal, eu faço o mesmo acima, mas coloco em uma classe auxiliar

Usar minha função auxiliar abaixo, permite manter a lógica separada para edição futura e também oferece várias maneiras de adicionar as classes

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

ou

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

Esta é a minha função auxiliar abaixo. Coloquei-o em um helper.js, onde mantenho todos os meus métodos comuns. Sendo uma função tão simples, evitei usar terceiros para manter o controle

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

Você pode usar matrizes e juntá-las usando espaço.

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

Isso resultará em:

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

Sei que esta é uma resposta tardia, mas espero que isso ajude alguém.

Considere que você definiu as seguintes classes em um arquivo css ' primário ', ' font-i ', ' font-xl '

• O primeiro passo seria importar o arquivo CSS.
• Então

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

faria o truque!

Para mais informações: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20

para mais aulas adicionando

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

Usando o exemplo TodoTextInput.js do 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} />
    )
  } 

a substituição de nomes de classe por código simples vanilla js terá a seguinte aparência:

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 você não deseja importar outro módulo, esta função funciona como o classNamesmódulo.

function classNames(rules) {
    var classes = ''

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

    return classes
} 

Você pode usá-lo assim:

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

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

Isto é o que eu faço:

Componente:

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

Componente de chamada:

<Button className = 'hashButton free anotherClass' />

Estou usando o React 16.6.3 e o @Material UI 3.5.1 e posso usar matrizes em className como className={[classes.tableCell, classes.capitalize]}

Portanto, no seu exemplo, o seguinte seria semelhante.

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

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

importar classNames de 'classnames';

1. Pode usar várias classes usando comas separados:

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

2. Pode usar várias classes usando vírgulas separadas com a condição:

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

Usar array como adereços para classNames também funcionará, mas fornece aviso, por exemplo

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

Eu uso o pacote 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
})} />

Você pode adicionar classes em qualquer formato (matriz, objeto, argumento). Todos os valores reais de matrizes ou argumentos e chaves em objetos iguais atrue serem mesclados.

por exemplo:

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 classNamespara o módulo css importado para o componente.

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

classnames dá a capacidade de declarar className um elemento React de maneira declarativa.

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

Eu costumo usá-lo assim: (no seu caso)

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

Quando se trata de JSX e (geralmente), temos alguns json ... do que você loop-lo ... componente . map , mais algumas condicionais para verificar se a propriedade json existe para renderizar o nome da classe, dependendo do valor da propriedade de JSON. No exemplo abaixo component_color e component_dark_shade são propriedades de component.map ()

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

Saída: <div class="component no-color light" .... Ou: <div class="component blue dark" ....dependendo dos valores do mapa ...

Quando tenho muitas classes diferentes, considero útil o seguinte.

O filtro remove qualquer um dos nullvalores e a união coloca todos os valores restantes em uma sequência separada por espaço.

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

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