Ich bin neu in ReactJS und JSX und habe ein kleines Problem mit dem folgenden Code.
Ich versuche, dem className
Attribut jeweils mehrere Klassen hinzuzufügen li
:
<li key={index} className={activeClass, data.class, "main-class"}></li>
Meine Reaktionskomponente ist:
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 & Support <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"));
javascript
css
reactjs
ecmascript-6
Tyrannisieren
quelle
quelle
classNames={{foo: true, bar: true, baz: false}}
undclassNames={["foo", "bar"]}
einfach arbeiten ?Antworten:
Ich verwende Klassennamen, wenn eine angemessene Menge an Logik erforderlich ist, um zu entscheiden, welche Klassen (nicht) verwendet werden sollen. Ein zu einfaches Beispiel :
Wenn Sie jedoch keine Abhängigkeit einfügen möchten, finden Sie unten bessere Antworten.
quelle
import classNames from 'classnames'
dann in einer Komponente zu verwendenclassName={classNames(classes.myFirstClass, classes.mySecondClass)}
.var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>;
Ich verwende
ES6
Vorlagenliterale . Zum Beispiel:Und dann einfach rendern:
Einzeiler-Version:
quelle
<input className={`class1 ${class2}`}>
<input class=" form-control input-lg round-lg" />
. Beachten Sie den zusätzlichen Platz am Anfang. Das ist gültig, aber hässlich. Sogar Reagieren FAQ empfiehlt eine andere Möglichkeit oder die Verwendung des Klassennamen-Pakets: reactjs.org/docs/faq-styling.htmlVerwenden Sie einfach JavaScript.
Wenn Sie einem Objekt klassenbasierte Schlüssel und Werte hinzufügen möchten, können Sie Folgendes verwenden:
Oder noch einfacher:
quelle
className={['terra-Table', medOrder.resource.status]}
className={[listOfClasses].join(' ')}
es zu benutzen , funktioniert für mich, danke!Concat
Keine Notwendigkeit, ich verwende CSS-Module und es ist einfach
Dies führt zu:
Mit anderen Worten, beide Stile
Bedingungen
Es wäre einfach, die gleiche Idee mit if's zu verwenden
quelle
className={
Schieberegler $ {className? `$ {className}: ''}
}` `. Aber es ist viel. [Anmerkung: 'etwas' + undefiniert = 'etwas unterdefiniert'. Js dynamische Konvertierung.Dies kann mit ES6-Vorlagenliteralen erreicht werden:
quelle
<input className={`${class1} ${class2}`}>
Sie können ein Element mit mehreren Klassennamen wie folgt erstellen:
Natürlich können Sie eine Zeichenfolge verwenden, die die Klassennamen enthält, und diese Zeichenfolge bearbeiten, um die Klassennamen des Elements zu aktualisieren.
quelle
"
anstelle von verwendet werden'
. Das tut mir leid.So können Sie das mit ES6 machen:
Sie können mehrere Klassen und Bedingungen auflisten und auch statische Klassen einschließen. Es ist nicht erforderlich, eine zusätzliche Bibliothek hinzuzufügen.
Viel Glück ;)
quelle
Vanilla JS
Keine Notwendigkeit für externe Bibliotheken - verwenden Sie einfach ES6- Vorlagenzeichenfolgen :
quelle
Vielleicht können Klassennamen Ihnen helfen.
quelle
Ich denke nicht, dass wir ein externes Paket verwenden müssen, um nur mehrere Klassen hinzuzufügen.
Ich persönlich benutze
oder
die zweite für den Fall, dass Sie Klassen bedingt hinzufügen oder entfernen müssen.
quelle
Durch einfaches Hinzufügen können wir leere Zeichenfolgen herausfiltern.
quelle
Sie können ein Element mit mehreren Klassennamen wie diesem erstellen. Ich habe es in beide Richtungen versucht. Es funktioniert einwandfrei ...
Wenn Sie CSS importieren, können Sie folgendermaßen vorgehen: Weg 1:
Weg 2:
** **.
Wenn Sie CSS als intern anwenden:
quelle
Sie können Folgendes tun:
Eine kurze und einfache Lösung, hoffe das hilft.
quelle
Dies kann mit https://www.npmjs.com/package/clsx erfolgen :
https://www.npmjs.com/package/clsx
Installieren Sie es zuerst:
Importieren Sie es dann in Ihre Komponentendatei:
Verwenden Sie dann die importierte Funktion in Ihrer Komponente:
quelle
Spät zur Party, aber warum sollte man einen Dritten für ein so einfaches Problem einsetzen?
Sie können es entweder tun, wie @Huw Davies erwähnt hat - der beste Weg
Beide sind gut. Für eine große App kann das Schreiben jedoch komplex werden. Um es optimal zu machen, mache ich das Gleiche wie oben, aber stelle es in eine Hilfsklasse
Wenn ich meine unten stehende Hilfsfunktion verwende, kann ich die Logik für zukünftige Bearbeitungen getrennt halten und habe mehrere Möglichkeiten, die Klassen hinzuzufügen
oder
Dies ist meine Hilfsfunktion unten. Ich habe es in eine helper.js gestellt, in der ich alle meine gängigen Methoden behalte. Da es sich um eine so einfache Funktion handelt, habe ich es vermieden, Dritte zu verwenden, um die Kontrolle zu behalten
quelle
Sie können Arrays verwenden und sie dann mit Leerzeichen verbinden.
Dies führt zu:
quelle
Ich weiß, dass dies eine späte Antwort ist, aber ich hoffe, dass dies jemandem hilft.
Beachten Sie, dass Sie die folgenden Klassen in einer CSS-Datei ' primary ', ' font-i ', ' font-xl ' definiert haben.
würde den Trick machen!
Für weitere Informationen: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20
quelle
für weitere Klassen hinzufügen
quelle
Verwenden Sie das Beispiel TodoTextInput.js von Facebook
Das Ersetzen von Klassennamen durch einfachen Vanille-JS-Code sieht folgendermaßen aus:
quelle
Wenn Sie kein anderes Modul importieren möchten, funktioniert diese Funktion wie das
classNames
Modul.Sie können es so verwenden:
quelle
function classNames(rules) { return Object.entries(rules) .reduce( (arr, [cls, flag]) => { if (flag) arr.push(cls); return arr }, [] ).join(" ") }
Das ist, was ich tue:
Komponente:
Komponente aufrufen:
quelle
Ich verwende React 16.6.3 und @Material UI 3.5.1 und kann Arrays in className wie verwenden
className={[classes.tableCell, classes.capitalize]}
In Ihrem Beispiel wäre das Folgende ähnlich.
quelle
Verwenden Sie https://www.npmjs.com/package/classnames
importiere Klassennamen aus 'Klassennamen';
Kann mehrere Klassen mit getrennten Komas verwenden:
Kann mehrere Klassen mit durch Bedingung getrennten Komas verwenden:
Die Verwendung eines Arrays als Requisiten für classNames funktioniert ebenfalls, gibt jedoch eine Warnung aus, z
quelle
Ich benutze das Paket rc-classnames .
Sie können Klassen in jedem Format (Array, Objekt, Argument) hinzufügen. Alle wahrheitsgemäßen Werte aus Arrays oder Argumenten sowie Schlüssel in Objekten, die gleich sind
true
um zusammengeführt zu werden.zum Beispiel:
quelle
Ich
bind
classNames
zum CSS-Modul in die Komponente importiert.classnames
gibt die Möglichkeit, deklarativclassName
für ein React-Element zu deklarieren .Ex:
quelle
Ich benutze es normalerweise so: (in deinem Fall)
Wenn es um JSX geht und (normalerweise) haben wir etwas json ... als Sie es schleifen ... Komponente . map sowie einige Bedingungen, um zu überprüfen, ob die json-Eigenschaft vorhanden ist, um den Klassennamen abhängig vom Eigenschaftswert von JSON zu rendern. Im folgenden Beispiel sind component_color und component_dark_shade Eigenschaften von component.map ()
Ausgabe:
<div class="component no-color light" ....
Oder:<div class="component blue dark" ....
abhängig von den Werten aus der Karte ...quelle
Wenn ich viele verschiedene Klassen habe, habe ich Folgendes als nützlich empfunden.
Der Filter entfernt alle
null
Werte und der Join fügt alle verbleibenden Werte in eine durch Leerzeichen getrennte Zeichenfolge ein.quelle