Detaillierte Erläuterung der Verwendung der JSX-Syntax in React

php中世界最好的语言

Freigeben： 2018-05-24 14:41:04

Original

1769 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Dieser Absatz meldet einen Fehler in der jsx-Syntax.

    var html = <input type="text" value="React">;

Nach dem Login kopieren

jsx ist korrekt.

    var html = <input type="text" value="React" />;
    var p = <p>React</p>;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Schließlich wird der obige Code in

    <span style="font-size:12px; color:red">DK</span>

Nach dem Login kopieren

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>

Nach dem Login kopieren

React wird basierend auf der jsx-Syntax implementiert, daher müssen Sie angeben, dass der Skripttyp text/babel ist

    <script type="text/bebal"></script>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!