Was ist JSX? Einführung in die Verwendung von jsx (mit Code)

Was ist jsx? Was sind die Verwendungsmöglichkeiten von jsx? In diesem Artikel erfahren Sie, was JSX ist. Eine Einführung in die Verwendung von jsx (mit Code). Schauen wir uns den spezifischen Inhalt an.

In React wird der Inhalt unserer Seite über JSX geschrieben. Was genau ist JSX? JSX ist eigentlich ein JavaScript-Objekt, das ein JS-Objekt erstellt, um die Informationen der HTML-Struktur zu beschreiben. Denken Sie hier daran, dass JSX eine Erweiterungssprache von js ist, ähnlich wie HTML, aber nicht HTML, da JSX auch Berechnungen und Beurteilungen durchführen, einige js-Sprachen hinzufügen usw. kann.

Operationen in JSX mit jsx

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

In JSX wird {} verwendet, um zwischen HTML und js, also allen js, zu unterscheiden Sprachen müssen mit {}

Variablen in JSX für jsx verwenden

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

Die Verwendung von jsx eingeschlossen werden : Stile in JSX

In JSX wird beim Hinzufügen von Stilen zu Elementen auch das Stilattribut verwendet, aber der Stil enthält ein Stilobjekt, wie unten gezeigt:

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: &#39;red&#39;}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

Durch den obigen Fall haben wir Sie können wissen, dass in JSX der Name des Stilattributs in Kamel-Schreibweise benannt werden muss.

Verwendung von jsx-HTML-Tags in JSX

In JSX müssen einige Tag-Namen angegeben werden konvertiert, um Konflikte zu vermeiden:

1. class muss durch className für das for-Attribut im

2. lable-Element ersetzt werden. Verwenden Sie stattdessen htmlFor. wie folgt:

<label htmlFor="msg" ></label>

Beachten Sie auch hier, dass alle Tags in JSX schließende Tags sein müssen

Verwandte Empfehlungen:

Detaillierte Erklärung, wie Vue unterstützt die JSX-Syntax

Einführungs-Tutorial zum Erlernen der JSX-Syntax im React-Framework von JavaScript_Grundkenntnisse

Detaillierte Einführung in React

Das obige ist der detaillierte Inhalt vonWas ist JSX? Einführung in die Verwendung von jsx (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!