Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de la syntaxe JSX dans React

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

php中世界最好的语言original: 2018-05-24 14:41:041831parcourir

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

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

Ce paragraphe en syntaxe jsx signalera une erreur

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

🎜>

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

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

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>

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>

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

Finalement, le code ci-dessus sera analysé dans

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

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>

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>

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la définition et de l'utilisation des composants dans ReactArticle suivant：Explication détaillée de la définition et de l'utilisation des composants dans React

Articles Liés

Voir plus