Un tutoriel d'introduction à l'apprentissage de la syntaxe JSX dans le framework React_Basic de JavaScript

Qu'est-ce que JSX ?

Lors de l'écriture de composants avec React, la syntaxe JSX est généralement utilisée. À première vue, il semble que les balises XML soient écrites directement dans le code Javascript. En fait, ce n'est que du sucre de syntaxe. Chaque balise XML sera JSX L'outil de conversion. le convertit en code Javascript pur. Bien sûr, vous pouvez également l'écrire directement en code Javascript pur. Cependant, en utilisant JSX, la structure du composant et la relation entre les composants paraîtront plus claires.

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

En quoi une balise XML, telle que 183121ef748febd9e2dc655b5a96afbd sera-t-elle convertie par l'outil de conversion JSX ?

Par exemple :

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

sera converti en :

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

En d'autres termes, lorsque nous écrivons une balise XML, nous appelons essentiellement la méthode React.createElement et renvoyons un objet ReactElement.

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

Le premier paramètre de cette méthode peut être une chaîne, qui représente un élément au sein du standard HTML, ou un objet de type ReactClass, qui représente le composant personnalisé que nous avons encapsulé auparavant. Le deuxième paramètre est un objet, ou un dictionnaire, qui enregistre tous les attributs inhérents à cet élément (c'est-à-dire la valeur qui ne change fondamentalement pas après avoir été transmise). À partir du troisième paramètre, tous les paramètres suivants sont considérés comme des éléments enfants de l'élément.

Convertisseur JSX

Il existe de nombreuses façons de convertir du code avec la syntaxe JSX en code Javascript pur Pour le code en ligne et HTML ou les fichiers externes qui n'ont pas été convertis, type="text" doit être ajouté à la balise de script /jsx" et introduit. le fichier JSXTransformer.js. Cependant, cette méthode n'est pas recommandée pour une utilisation dans un environnement de production. La méthode recommandée consiste à convertir le code avant sa mise en ligne. Vous pouvez utiliser npm pour installer React-Tools globalement : .

npm install -g react-tools

Et utilisez l'outil de ligne de commande pour convertir (pour une utilisation spécifique, veuillez vous référer à jsx -h) :

jsx src/ build/

Si vous utilisez des outils d'automatisation, tels que gulp, vous pouvez utiliser le plug-in gulp-react correspondant.

Utilisation de JS dans un modèle HTML

Il est très pratique d'utiliser JS dans les modèles HTML. Il vous suffit d'utiliser des accolades pour entourer le code JS.

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

Une fois compilé, cela devient comme ceci :

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
); 

Il convient de noter que les accolades sont en fait une expression de sortie variable. JSX transmet finalement directement le contenu des accolades comme troisième paramètre de React.createElement (transmis directement sans aucune modification). d'expression peut y être placée, et toute manière d'écrire qui ne peut pas être directement utilisée comme troisième paramètre est fausse, donc c'est une erreur de votre part d'écrire comme ceci :

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

Parce qu'il est évident que le contenu entre accolades est placé directement sur le troisième paramètre, et que la syntaxe est incorrecte.

C'est également faux d'écrire :

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
); 

Parce que React.createElement("div", null, var a = 1;) est une erreur de syntaxe.

Vous pouvez alors également comprendre pourquoi l’expression js entre accolades ne peut pas se terminer par un point-virgule.

Il convient de noter que si vous affichez une variable JS dans un attribut, vous ne pouvez pas ajouter de guillemets, sinon elle sera traitée comme une chaîne et non analysée.

Cela devrait ressembler à ceci :

<a title={title}>链接</a>

Utiliser les balises HTML

Pour créer un élément qui existe dans le standard HTML, il suffit d'écrire directement du code HTML :

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

Cependant, il convient de noter que les deux attributs de class et for, la syntaxe JSX seront finalement convertis en Javascript pur, donc className et htmlFor doivent être utilisés comme dans Javascript DOM.

Un autre point est que lors de la création d'éléments dans le standard HTML, le convertisseur JSX supprimera ces attributs non standard. Si vous devez ajouter des attributs personnalisés, vous devez ajouter le préfixe data- avant ces attributs personnalisés.

<div data-custom-attribute="foo" />

Composants d'espace de noms

Par exemple, lors du développement d'un composant, un composant a plusieurs sous-composants. Si vous souhaitez que ces sous-composants soient utilisés comme attributs de son composant parent, vous pouvez l'utiliser comme ceci :

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

De cette façon, il vous suffit de définir la ReactClass du composant enfant comme propriété de son composant parent :

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

La création des éléments enfants peut être directement confiée au convertisseur JSX :

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

Cette fonctionnalité nécessite la version 0.11 et supérieure

Expression Javascript

Pour écrire des expressions Javascript dans la syntaxe JSX, il vous suffit d'utiliser {}, comme l'exemple suivant utilisant l'opérateur ternaire :

// Input (JSX):
var content = <Container>{window.isLoggedIn &#63; <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
 Container,
 null,
 window.isLoggedIn &#63; React.createElement(Nav) : React.createElement(Login)
);

Cependant, il convient de noter que la syntaxe JSX n'est que du sucre syntaxique. Derrière elle se trouve l'appel de la méthode constructeur de ReactElement, React.createElement, donc écrire comme ceci n'est pas autorisé :

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

Vous pouvez voir des erreurs de syntaxe évidentes dans le code Javascript converti, alors utilisez l'opérateur ternaire ou écrivez comme ceci :

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

这样就相当于：

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'