Explication détaillée de l'utilisation de la syntaxe JSX dans React

php中世界最好的语言

Libérer： 2018-05-24 14:41:04

original

1781 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la syntaxe JSX dans React. Quelles sont les précautions lors de l'utilisation de la syntaxe JSX dans React. Voici des cas pratiques, jetons un coup d'œil.

Syntaxe JSX

Un sucre de syntaxe js spécial qui peut utiliser des balises html comme objets dans le code. Il peut être résumé dans les caractéristiques suivantes :

Aucun guillemet <.>

était utilisé comme balise html dans js en ajoutant des guillemets sous forme de

chaîne Cependant, dans la syntaxe jsx, il n'est pas nécessaire d'ajouter des guillemets, et

l'est. utilisé directement comme objet. La balise

    var html = <h1>React</h1>;

Copier après la connexion

doit avoir une balise de fermeture ou une balise de fin correspondante :

Parfois, lorsque nous écrivons la structure html, nous n'ajoutons pas la balise de fin correspondante, mais le navigateur peut l'analyser. normalement, mais En syntaxe jsx, il est obligatoire d'écrire la structure html standard

Ce paragraphe de balise html peut être analysé normalement par le navigateur

    <input type="text" value="React">

Copier après la connexion

Ce paragraphe en syntaxe jsx signalera une erreur

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

Copier après la connexion

🎜>

La façon correcte d'écrire jsx devrait être comme ceci

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

Copier après la connexion

Il ne peut y avoir qu'un seul nœud racine

Dans la syntaxe jsx, la structure de niveau supérieur doit n'avoir qu'un seul nœud, et aucun nœud frère ne peut apparaître

    var html = 
    <p>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

Copier après la connexion

Vous ne pouvez pas ajouter de commentaires dans les balises

Dans la syntaxe jsx, la balise html est un objet, une structure de données, pas un vrai dom nœud, ni une chaîne. Par conséquent, les commentaires ne peuvent pas être ajoutés aux balises.

Le code suivant ajoute des commentaires aux balises, une erreur sera donc signalée. La

    var html = 
    <p>
        <!--不能添加注释，这里会报错-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

Copier après la connexion

la syntaxe jsx permet de mélanger les balises html et le code javascript

Dans la syntaxe jsx, si vous souhaitez utiliser du code js dans les balises html, utilisez des accolades ({expression}) ci-joint.

    var name = "DK";
    var style = {fontSize: '12px', color: 'red'};
    var html = <span style={style}>{name}</span>;

Copier après la connexion

Finalement, le code ci-dessus sera analysé dans

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

Copier après la connexion

React utilise

React est une bibliothèque de framework tierce, vous devez donc d'abord l'utiliser Pertinent les fichiers de bibliothèque sont introduits.

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

Copier après la connexion

React est implémenté sur la base de la syntaxe jsx, vous devez donc spécifier que le type de script est text/babel

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

Copier après la connexion

`ReactDOM.render`Utilisez les objets et méthodes principaux de React

pour convertir Balises html Rendu dans le conteneur spécifié

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes d'utilisation des interfaces en JS

Explication détaillée des étapes de mise en œuvre de PromesseA+

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!