React
JSX

Remarques

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

const element = <h1>Hello, world!</h1>;

Accessoires dans JSX

Il existe plusieurs façons de spécifier des accessoires dans JSX.

Expressions JavaScript

Vous pouvez transmettre n'importe quelle expression JavaScript en prop, en l'entourant de {} . Par exemple, dans cette JSX:

<MyComponent count={1 + 2 + 3 + 4} />

Dans le MyComponent , la valeur de props.count sera 10 , car l'expression 1 + 2 + 3 + 4 est évaluée.

Si les instructions et les boucles ne sont pas des expressions en JavaScript, elles ne peuvent pas être utilisées directement dans JSX.

Littéraux de chaîne

Bien sûr, vous pouvez simplement transmettre n'importe quelle string literal comme un prop . Ces deux expressions JSX sont équivalentes:

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

Lorsque vous passez un littéral de chaîne, sa valeur est HTML-sans-échappement. Donc, ces deux expressions JSX sont équivalentes:

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

Ce comportement n'est généralement pas pertinent. C'est seulement mentionné ici pour être complet.

Valeur par défaut des accessoires

Si vous ne transmettez aucune valeur pour un accessoire, la valeur par défaut est true . Ces deux expressions JSX sont équivalentes:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Cependant, l’équipe React affirme que cette approche n’est pas recommandée dans ses documents, car elle peut être confondue avec l’objet abrégé ES6 {foo} qui est l'abréviation de {foo: foo} plutôt que {foo: true} . Ils disent que ce comportement est juste là pour qu'il corresponde au comportement de HTML.

Attributs de diffusion

Si vous avez déjà des objets en tant qu'objet et que vous souhaitez les transmettre dans JSX, vous pouvez utiliser ... tant qu'opérateur de diffusion pour transmettre l'objet de l'ensemble des objets. Ces deux composants sont équivalents:

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

Enfants à JSX

Dans les expressions JSX qui contiennent à la fois une balise d'ouverture et une balise de fermeture, le contenu entre ces balises est transmis en tant que support spécial: props.children . Il y a plusieurs façons différentes de transmettre les enfants:

Littéraux de chaîne

Vous pouvez mettre une chaîne entre les balises d'ouverture et de fermeture et props.children sera simplement cette chaîne. Ceci est utile pour la plupart des éléments HTML intégrés. Par exemple:

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

Ceci est valide JSX, et props.children dans MyComponent sera simplement <h1>Hello world!</h1> .

Notez que le HTML n'est pas échappé , vous pouvez donc généralement écrire JSX comme si vous écriviez du HTML.

N'oubliez pas que dans ce cas, JSX:

• supprime les espaces au début et à la fin d'une ligne;
• supprime les lignes vierges;
• les nouvelles lignes adjacentes aux étiquettes sont supprimées;
• les nouvelles lignes qui apparaissent au milieu des littéraux de chaîne sont condensées dans un seul espace.

JSX Enfants

Vous pouvez fournir plus d'éléments JSX que les enfants. Ceci est utile pour afficher les composants imbriqués:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

Vous pouvez mélanger différents types d'enfants, vous pouvez donc utiliser des littéraux de chaîne avec des enfants JSX . Ceci est une autre façon dont JSX est comme HTML, de sorte que ce soit à la fois JSX valide et HTML valide:

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Notez qu'un composant React ne peut pas renvoyer plusieurs éléments React, mais qu'une seule expression JSX peut avoir plusieurs enfants . Donc, si vous voulez qu'un composant rende plusieurs choses, vous pouvez les encapsuler dans un div comme l'exemple ci-dessus.

Expressions JavaScript

Vous pouvez transmettre toute expression JavaScript en tant qu’enfant, en la plaçant dans {} . Par exemple, ces expressions sont équivalentes:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

Ceci est souvent utile pour rendre une liste d'expressions JSX de longueur arbitraire. Par exemple, cela affiche une liste HTML:

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

Notez que les expressions JavaScript peuvent être mélangées avec d'autres types d'enfants.

Fonctionne comme des enfants

Normalement, les expressions JavaScript insérées dans JSX seront évaluées par une chaîne, un élément React ou une liste de ces éléments. Cependant, props.children fonctionne comme n'importe quel autre accessoire en ce sens qu'il peut transmettre n'importe quelle sorte de données, pas seulement celles que React sait rendre. Par exemple, si vous avez un composant personnalisé, vous pouvez le demander en tant que props.children :

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

Les enfants passés à un composant personnalisé peuvent être n'importe quoi, tant que ce composant les transforme en quelque chose que React peut comprendre avant le rendu. Cet usage n'est pas courant, mais cela fonctionne si vous voulez étirer ce que JSX est capable de faire.

Valeurs ignorées

Notez que false , null , undefined et true sont des enfants valides. Mais ils ne rendent tout simplement pas. Ces expressions JSX rendront toutes la même chose:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Ceci est extrêmement utile pour rendre conditionnellement des éléments React. Ce JSX ne rend qu'un si showHeader est vrai:

<div>
  {showHeader && <Header />}
  <Content />
</div>

Une mise en garde importante est que certaines valeurs "fausses", telles que le nombre 0 , sont toujours rendues par React. Par exemple, ce code ne se comportera pas comme prévu, car 0 sera imprimé lorsque props.messages est un tableau vide:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

Une approche pour résoudre ce problème consiste à s'assurer que l'expression avant le && est toujours booléenne:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

Enfin, gardez à l'esprit que si vous voulez qu'une valeur comme false , true , null ou undefined apparaisse dans la sortie, vous devez d'abord la convertir en chaîne:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>