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

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

WBOY

Libérer： 2016-05-16 15:12:15

original

1893 Les gens l'ont consulté

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

Copier après la connexion

En quoi une balise XML, telle que 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>;

Copier après la connexion

sera converti en :

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

Copier après la connexion

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 ...]
)

Copier après la connexion

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

Copier après la connexion

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/

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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({ ... });

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!");

Copier après la connexion

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>

Copier après la connexion

传播属性（Spread Attributes）

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

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

Copier après la connexion

这样就相当于：

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

Copier après la connexion

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

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

Copier après la connexion