ReactJS adiciona classe dinâmica a nomes de classe manuais

Eu preciso adicionar uma classe dinâmica a uma lista de classes regulares, mas não tenho idéia de como (estou usando babel), algo como isto:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

Alguma ideia?

Você pode fazer isso, JavaScript normal:

className={'wrapper searchDiv ' + this.state.something}

ou a versão do modelo de string, com reticulares:

className={`wrapper searchDiv ${this.state.something}`}

É claro que ambos os tipos são apenas JavaScript, mas o primeiro padrão é o tipo tradicional.

De qualquer forma, no JSX, tudo o que estiver entre colchetes é executado como JavaScript, para que você possa basicamente fazer o que quiser lá. Mas combinar seqüências de caracteres JSX e colchetes não é obrigatório para atributos.

Dependendo de quantas classes dinâmicas você precisa adicionar à medida que seu projeto cresce, provavelmente vale a pena conferir o utilitário classnames de JedWatson no GitHub. Ele permite que você represente suas classes condicionais como um objeto e retorna as que são avaliadas como verdadeiras.

Então, como um exemplo da documentação do React:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

Como o React aciona uma nova renderização quando há uma alteração de estado, os nomes de classes dinâmicas são manipulados naturalmente e atualizados com o estado do seu componente.

Uma simples sintaxe possível será:

<div className={`wrapper searchDiv ${this.state.something}`}>

Aqui está a melhor opção para o className dinâmico, basta fazer uma concatenação como fazemos em Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Se você precisar de nomes de estilo que devem aparecer de acordo com a condição de estado, prefiro usar esta construção:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

tente isso usando ganchos:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

e adicione isso no atributo className:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

para adicionar classe:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

para excluir a classe:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Você pode usar este pacote npm. Ele lida com tudo e tem opções para classes estáticas e dinâmicas com base em uma variável ou uma função.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

Esta solução é experimentada e testada no React SPFx.

Adicione também a declaração de importação:

import { css } from 'office-ui-fabric-react/lib/Utilities';