Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung der JSX-Syntax in React
Detaillierte Erläuterung der Verwendung der JSX-Syntax in React
- php中世界最好的语言Original
- 2018-05-24 14:41:041725Durchsuche
Dieses Mal werde ich Ihnen die Verwendung der JSX-Syntax in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung der JSX-Syntax in React?
JSX-Syntax
Ein spezieller JS-Syntaxzucker, der HTML-Tags als Objekte im Code verwenden kann. Er kann in den folgenden Merkmalen zusammengefasst werden:
Keine Anführungszeichen
wurde früher als HTML-Tag in js verwendet, indem Anführungszeichen als Zeichenfolge hinzugefügt wurden. In der jsx-Syntax müssen jedoch keine Anführungszeichen hinzugefügt werden, und es wird direkt als Objekt
var html = <h1>React</h1>;Das Tag muss ein entsprechendes Schluss-Tag oder Schluss-Tag haben: Manchmal fügen wir beim Schreiben der HTML-Struktur nicht das entsprechende Schluss-Tag hinzu, aber der Browser kann es normal analysieren, aber in jsx In der Syntax ist es obligatorisch, die Standard-HTML-Struktur zu schreiben.
Dieser Absatz des HTML-Tags kann normal im Browser analysiert werden.
<input type="text" value="React">Dieser Absatz meldet einen Fehler in der jsx-Syntax.
var html = <input type="text" value="React">;jsx ist korrekt.
var html = <input type="text" value="React" />; var p = <p>React</p>;kann nur einen Wurzelknoten haben. In der jsx-Syntax darf die Struktur der obersten Ebene nur einen Knoten haben , und es können keine Geschwisterknoten erscheinen.
var html = <p> <h1>Tom</h1> <h1>Lucy</h2> </p>können keine Kommentare in Tags hinzufügen. In der jsx-Syntax ist das HTML-Tag ein Objekt, eine Datenstruktur, kein echter Dom-Knoten oder eine Zeichenfolge. Daher können dem Tag keine Kommentare hinzugefügt werden.
Der folgende Code fügt Kommentare zu den Tags hinzu, sodass ein Fehler gemeldet wird.
var html = <p> <!--不能添加注释，这里会报错--> <h1>Tom</h1> <h1>Lucy</h2> </p>jsx-Syntax ermöglicht das Mischen von HTML-Tags und
Javascript-Codes
Wenn Sie in der jsx-Syntax js-Code in HTML-Tags verwenden möchten, verwenden Sie geschweifte Klammern ({ Ausdruck}) eingeschlossen. var name = "DK";
var style = {fontSize: '12px', color: 'red'};
var html = <span style={style}>{name}</span>;Schließlich wird der obige Code in
<span style="font-size:12px; color:red">DK</span>React analysiert. React ist eine Framework-Bibliothek eines Drittanbieters, daher müssen Sie vorher zuerst die relevanten Bibliotheksdateien herunterladen Verwendung. Einführung.
<!--React 核心库-->
<script src="../../../../libs/react/react.js"></script>
<!--React 跟 Dom 相关的功能库-->
<script src="../../../../libs/react/react-dom.js"></script>
<!--babel 库，将 JSX 语法转为 JavaScript 语法-->
<script src="../../../../libs/react/browser.min.js"></script>
React wird basierend auf der jsx-Syntax implementiert, daher müssen Sie angeben, dass der Skripttyp text/babel ist <script type="text/bebal"></script>
Verwenden Sie die Kernobjekte und -methoden von React , um das HTML-Tag zu rendern der angegebene ContainerReactDOM.render <body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<!--jsx 语法-->
<script type="text/babel">
//将标签直接渲染到容器 p1 当中
ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
var _style = {fontSize: '12px', color: 'red'};
var _name = "Tom";
var _obj = {name: "DK", age: 18};
//标签与 js 代码混写
ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
var array = ["Tom", "Lucy", "Lily"];
//多级标签和 js 代码混写
ReactDOM.render(
<p>
<ul>
{
array.map(function(arg1, arg2){
return <li key={arg2}>{arg1}</li>;
})
}
</ul>
<ul><li>Sam</li></ul>
<ul><li><input type="text" /></li></ul>
</p>,
document.getElementById('p3')
);
</script>
</body>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zur Verwendung von Schnittstellen in JS
Detaillierte Erläuterung der Implementierungsschritte von VersprechenA+
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der JSX-Syntax in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!