ReactJS fügt manuellen Klassennamen eine dynamische Klasse hinzu

158

Ich muss einer Liste regulärer Klassen eine dynamische Klasse hinzufügen, habe aber keine Ahnung, wie (ich verwende babel) so etwas:

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

Irgendwelche Ideen?

css reactjs

— Menschheit1023
quelle

Nützliche Antworten für Reactjs Styling Best Practice bei Link

— Rahil Ahmad

240

Sie können dies entweder mit normalem JavaScript tun:

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

oder die String-Template-Version mit Backticks:

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

Beide Typen sind natürlich nur JavaScript, aber das erste Muster ist das traditionelle.

In JSX wird alles, was in geschweiften Klammern steht, als JavaScript ausgeführt, sodass Sie dort grundsätzlich alles tun können, was Sie wollen. Das Kombinieren von JSX-Zeichenfolgen und geschweiften Klammern ist jedoch ein No-Go für Attribute.

— dannyjolie
quelle

und was bei mehreren Klassen?

— Pardeep Jain

5

Bei mehreren dynamischen Klassen müssen alle dynamischen Klassen aus dem Status stammen, dh es ist nicht möglich, sie zu verwenden element.classList.add("my-class"). daher unter Berücksichtigung:

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

— Kevin Farrugia

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Das funktioniert nicht. Kann jemand sagen warum?

— Kryptokinght

54

Je nachdem , wie viele dynamische Klassen , die Sie hinzufügen müssen , wie Ihr Projekt ist es wahrscheinlich lohnt sich , die wächst Klassennamen Dienstprogramm von JedWatson auf GitHub. Sie können Ihre bedingten Klassen als Objekt darstellen und diejenigen zurückgeben, die als wahr ausgewertet werden.

Als Beispiel aus der React-Dokumentation:

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>;

}

Da React bei einer Statusänderung ein erneutes Rendern auslöst, werden Ihre dynamischen Klassennamen auf natürliche Weise behandelt und über den Status Ihrer Komponente auf dem neuesten Stand gehalten.

— Brad Colthurst
quelle

5

Die Verwendung von classNames für eine so einfache Sache ist ein Overkill. Vermeiden Sie es und entscheiden Sie sich für die einfache Antwort von dannyjolie

— Checkliste

2

Bist du sicher, dass es eine einfache Sache ist? Fast immer möchten Sie eine genaue Kontrolle darüber haben, welche Klassen auf Elemente angewendet werden.

— Dragas

5

@checklist Ich würde anders argumentieren, das Klassennamenpaket ist 1,1 KB vor Gzipping (und ein halbes KB nach Gzipping), hat keine Abhängigkeiten und bietet eine viel sauberere API für die Manipulation von Klassennamen. Es ist nicht erforderlich, etwas so Kleines vorzeitig zu optimieren, wenn die API viel aussagekräftiger ist. Wenn Sie die Standard-Zeichenfolgenmanipulation verwenden, müssen Sie den Abstand berücksichtigen, entweder vor jedem bedingten Klassennamen oder nach jedem Standardklassennamen.

— Tomhughes

classNames ist großartig. Ich fand, dass das Lesen, Hinzufügen und Reparieren von Requisiten einfacher war als die manuelle Bearbeitung, da die Komplexität der Komponente zunahm.

— MiFiHiBye

37

Eine einfache mögliche Syntax ist:

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

— Oligopol
quelle

25

Hier ist die beste Option für Dynamic className. Führen Sie einfach eine Verkettung durch, wie wir es in Javascript tun.

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

— Saad Mirza
quelle

Dies ist die beste Lösung ohne Flusenprobleme. Lief wie am Schnürchen. Danke dir.

— Royal.O

3

Wenn Sie Stilnamen benötigen, die entsprechend der Zustandsbedingung angezeigt werden sollen, bevorzuge ich diese Konstruktion:

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

— Sergey Gubarev
quelle

2

Versuchen Sie dies mit Haken:

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

und fügen Sie dies im Attribut className hinzu:

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

Klasse hinzufügen:

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

Klasse löschen:

        const deleteClass= classToDelete => {

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

        }

— Hamza Khattabi
quelle

1

Sie können dieses npm-Paket verwenden. Es behandelt alles und verfügt über Optionen für statische und dynamische Klassen, die auf einer Variablen oder einer Funktion basieren.

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

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
quelle

-1

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

Diese Lösung hat sich in React SPFx bewährt.

Fügen Sie außerdem die Importanweisung hinzu:

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

— Harjot Singh
quelle