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.
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 :
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 balisevar html = <h1>React</h1>;
Ce paragraphe de balise html peut être analysé normalement par le navigateur
<input type="text" value="React">
var html = <input type="text" value="React">;
var html = <input type="text" value="React" />; var p = <p>React</p>;
var html = <p> <h1>Tom</h1> <h1>Lucy</h2> </p>
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.
var html = <p> <!--不能添加注释,这里会报错--> <h1>Tom</h1> <h1>Lucy</h2> </p>
var name = "DK"; var style = {fontSize: '12px', color: 'red'}; var html = <span style={style}>{name}</span>;
<span style="font-size:12px; color:red">DK</span>
<!--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>
<script type="text/bebal"></script>
ReactDOM.render
Utilisez les objets et méthodes principaux de React <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>
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!