Maison > Article > interface Web > 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:041726parcourir
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 dechaî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>;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 racineDans 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.
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.renderUtilisez 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!