So implementieren Sie die dynamische Bindung von Klasse und Stil in React-JSX (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Implementierung der dynamischen Bindung von Klasse und Stil in React-JSX (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist . hat geholfen.

Zusammenfassung: Die Manipulation von Klassenlisten und Inline-Stilen von Elementen ist eine häufige Anforderung für die Datenbindung. Um eine leistungsstarke JS zu erreichen, ist eine dynamische Bindung von Klassen und Stilen erforderlich ein hohes Maß an Lese- und Schreibkenntnissen. Dieser Artikel basiert auf der React-JSX-Syntax und wird mit den Implementierungsmethoden anderer Frameworks kombiniert, um vorzustellen, wie die dynamische Bindung von ClassName und Style implementiert wird.

Hinweis: Die Beispiele in diesem Artikel wurden überprüft. Bitte kritisieren und korrigieren Sie sie.

HTML-Klasse binden

Objektsyntax

Wir können „Give className“ an ein Objekt übergeben, um Klassen dynamisch zu wechseln:

Hinweis: Die Verwendung von Objektsyntax wie Vue, Applet usw. wird nicht unterstützt

Fehlerbeispiel:

render(){
  return <p className={ &#39;box-color&#39;：this.state.isError }>hello world</p>
}

kann erreicht werden. Die Syntax lautet wie folgt:

1. Verwenden Sie logische Operatoren

CSS-Datei

.box-color {
  color：red;
}

js-Datei

render(){
  return <p className={ this.state.isError && &#39;box-color&#39; }>hello world</p>
}

2. Verwenden Sie den ternären Operator

CSS-Datei

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p className={ this.state.isShow ? &#39;box-show&#39; : &#39;box-hide&#39; }>hello world</p>
}

3. Mit Funktionen

gebundene Datenobjekte müssen nicht inline in der Vorlage definiert werden: Sie können eine Funktion definieren, ähnlich der berechneten Hook-Funktion in vue

js-Datei

getIsError() {
  return this.state.isError ? 'box-color' : '';
}

render(){
  return <p className={ this.getIsError() }>hello world</p>
}

Hinweis: Die folgende Art des Schreibens von Objektvariablen wird nicht unterstützt und es wird kein Fehler gemeldet. Der Konsolenklassenname wird als [Objektobjekt] angezeigt, was ungültig ist .

const classObj = {
  'box-show': this.state.isShow,
  'box-color': this.state.isError
}

render(){
  return <p className={ classObj }>hello world</p>
}

Im Allgemeinen wird die Funktionsbindungsmethode in Szenarien verwendet, in denen die Projektlogik relativ komplex ist. Bei übermäßiger Verwendung werden die Ansichtsebene und die Logikebene vermischt und verwechselt, was das Lesen und Warten erschwert. Es wird empfohlen, logische Operatoren und ternäre Operationen zu verwenden, um die Klasse dynamisch zu binden.

Array-Syntax

Die React-JSX-Syntax unterstützt keine ClassName-Array-Syntax, versuchen Sie es mit dem Beispiel:

CSS-Datei

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

JS-Datei

this.state = {isShow: false}

render(){
  return <p className={ this.state.isShow ? &#39;box-color&#39; : [ &#39;box-color&#39;, &#39;box-hide&#39;] }>hello world</p>
}

Ergebnis der Konsolenanzeige (ungültig, in der Mitte steht ein zusätzliches Komma):

<p class="box-color, box-hide">hello world</p>

Hinweis: Da die Array-Syntax nicht unterstützt wird, können Sie die Stile nur in „box-color“ bis „box -hide" ", verwenden Sie den ternären Operator, um es darzustellen, was die Menge an CSS-Code praktisch erhöht.

Bind-Inline-Stil

Objektsyntax

Die Syntax von Stilobjekten ist intuitiver als die von clasName-Objekten und die Verarbeitungsfunktionen sind einfacher. Logische Operatormethoden und Funktionsbindungsmethoden können verwendet werden Bei der Implementierung von className wird im Folgenden nur die Verwendung des ternären Operators vorgestellt:

Ternärer Operator

Ähnlich wie bei Vues vue-if und der wx-if-Anweisung des WeChat-Applets können Sie den Stil einer dynamischen Implementierung verwenden des ternären Operators

js-Datei

render(){
  return <p style={ this.state.isShow ? {display: &#39;inline-block&#39;} : { display: &#39;none&#39;} }>hello world</p>
}

Array-Syntax

Die React-JSX-Syntax unterstützt auch keine Style-Array-Syntax, versuchen Sie es mit dem Beispiel:

js-Datei

render(){
  return <p style={ this.state.isShow ? {color: &#39;red&#39;} : [{color: &#39;red&#39;}, {display: &#39;inline-block&#39;}] }></p>
}

Die Konsole zeigt das Ergebnis (ungültig) an:

<p></p>

Kurz gesagt, um Projektanforderungen mit hoher Qualität abzuschließen und immer komplexere Geschäftsszenarien zu bewältigen, die eine große Anzahl von Doms umfassen Elemente, Es wird nicht empfohlen, eine Stilvariable willkürlich zu benennen und sie dann an Klasse und Stil zu binden.

Empfohlene verwandte Artikel:

HTML-Implementierung einer einfachen Registrierungsseite (mit Code)

Link-Tag-Link-CSS und @import-Laden Was ist der Unterschied?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die dynamische Bindung von Klasse und Stil in React-JSX (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!