ReactJS aggiunge una classe dinamica ai nomi delle classi manuali

158

Ho bisogno di aggiungere una classe dinamica a un elenco di classi regolari, ma non ho idea di come (sto usando babel), qualcosa del genere:

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

Qualche idea?

css reactjs

— Mankind1023
fonte

Risposte utili per le migliori pratiche di styling di reazioni al link

— Rahil Ahmad,

241

Puoi farlo, JavaScript normale:

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

o la versione del modello di stringa, con i backtick:

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

Entrambi i tipi sono ovviamente solo JavaScript, ma il primo modello è quello tradizionale.

Ad ogni modo, in JSX, tutto ciò che è racchiuso tra parentesi graffe viene eseguito come JavaScript, quindi puoi praticamente fare tutto ciò che vuoi lì. Ma la combinazione di stringhe JSX e parentesi graffe non è necessaria per gli attributi.

— dannyjolie
fonte

e in caso di più classi?

— Pardeep Jain,

5

Nel caso di più classi dinamiche, tutte le classi dinamiche devono provenire dallo stato, ovvero non è possibile utilizzarle element.classList.add("my-class"); pertanto consentendo:

className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}

— Kevin Farrugia il

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Questo non funziona Qualcuno può dire perché?

— Kryptokinght,

54

A seconda di quante classi dinamiche devi aggiungere man mano che il tuo progetto cresce, probabilmente vale la pena dare un'occhiata all'utility classnames di JedWatson su GitHub. Ti consente di rappresentare le tue classi condizionali come oggetto e restituisce quelle che valutano come vere.

Quindi, come esempio dalla sua documentazione di 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>;

}

Poiché React innesca un nuovo rendering in caso di cambio di stato, i nomi delle classi dinamiche vengono gestiti in modo naturale e aggiornati con lo stato del componente.

— Brad Colthurst
fonte

5

L'uso di classNames per una cosa così semplice è eccessivo. Evita di usarlo e opta per la semplice risposta di dannyjolie

— checklist

2

Sei sicuro che sia una cosa semplice? Quasi sempre vuoi avere il pieno controllo su quali classi vengono applicate agli elementi.

— Dragas,

5

@checklist Direi diversamente, il pacchetto classnames è 1.1kB prima di Gzipping (e mezzo kB dopo Gzipping), non ha dipendenze e fornisce un'API molto più pulita per la manipolazione dei nomi di classe. Non è necessario ottimizzare prematuramente qualcosa di così piccolo, quando l'API è molto più espressiva. Quando si utilizza la manipolazione di stringhe standard, è necessario ricordare di tenere conto della spaziatura, prima di ogni nome di classe condizionale o dopo ogni nome di classe standard.

— tomhughes,

classNames è fantastico, ho scoperto che leggere, aggiungere e riparare oggetti di scena erano più facili della manipolazione manuale man mano che il componente cresceva in complessità.

— MiFiHiBye il

37

Una semplice sintassi possibile sarà:

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

— Oligopol
fonte

26

Ecco la migliore opzione per Dynamic className, fai solo un po 'di concatenazione come facciamo in Javascript.

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

— Saad Mirza
fonte

Questa è la soluzione migliore senza problemi di pelucchi. Ha funzionato come un fascino. Grazie.

— Royal.O

3

Se hai bisogno di nomi di stile che dovrebbero apparire in base alla condizione dello stato, preferisco usare questa costruzione:

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

— Sergey Gubarev
fonte

2

prova questo usando gli hook:

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

e aggiungilo all'attributo className:

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

per aggiungere classe:

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

per eliminare la classe:

        const deleteClass= classToDelete => {

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

        }

— Hamza Khattabi
fonte

1

Puoi usare questo pacchetto npm. Gestisce tutto e ha opzioni per classi statiche e dinamiche basate su una variabile o una funzione.

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

— Tushar Sharma
fonte

1

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

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

— Harshvardhan Singh Baghel
fonte

-1

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

Questa soluzione è provata e testata in React SPFx.

Aggiungi anche la dichiarazione di importazione:

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

— Harjot Singh
fonte