Une seule ligne fonctionne bien

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

pas pour plusieurs lignes

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

Merci.

Essayez de considérer les balises comme des appels de fonction (voir la documentation ). Alors le premier devient:

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

Et le second:

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

Il devrait maintenant être clair que le deuxième extrait de code n'a pas vraiment de sens (vous ne pouvez pas renvoyer plus d'une valeur dans JS). Vous devez soit l'envelopper dans un autre élément (très probablement ce que vous voudriez, de cette façon vous pouvez également fournir une keypropriété valide ), ou vous pouvez utiliser quelque chose comme ceci:

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

Avec du sucre JSX:

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

Vous n'avez pas besoin d'aplatir le tableau résultant, React le fera pour vous. Voir le violon suivant http://jsfiddle.net/mEB2V/1/ . Encore une fois: envelopper les deux éléments dans une div / section sera probablement mieux à long terme.

Il semble que l'ancienne réponse concernant le retour d'un tableau ne s'applique plus (peut-être depuis React ~ 0.9, comme @ dogmatic69 l'a écrit dans un commentaire ).

La documentation indique que vous devez renvoyer un seul nœud:

Nombre maximum de nœuds racine JSX

Actuellement, dans le rendu d'un composant, vous ne pouvez renvoyer qu'un seul nœud; si vous avez, par exemple, une liste de div à renvoyer, vous devez envelopper vos composants dans un div, un span ou tout autre composant.

N'oubliez pas que JSX se compile en JS normal; renvoyer deux fonctions n'a pas vraiment de sens syntaxique. De même, ne mettez pas plus d'un enfant dans un ternaire.

Dans de nombreux cas, vous pouvez simplement envelopper les choses dans un <div>fichier <span>.

Dans mon cas, je voulais retourner plusieurs <tr>s. Je les ai enveloppés dans un <tbody>- une table peut avoir plusieurs corps.

EDIT: À partir de React 16.0, le retour d'un tableau est apparemment à nouveau autorisé, tant que chaque élément a un key: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html # new-render-return-types-fragments-and-strings

EDIT: React 16.2 vous permet d'entourer une liste d'éléments avec <Fragment>…</Fragment>ou même <>…</>, si vous préférez cela à un tableau: https://blog.jmes.tech/react-fragment-and-semantic-html/

À partir de React v16.0.0 , il est possible de renvoyer plusieurs éléments en les enveloppant dans unArray

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

Également à partir de React v16.2.0 , une nouvelle fonctionnalité appelée React Fragmentsest introduite que vous pouvez utiliser pour envelopper plusieurs éléments

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

Selon la documentation:

Un modèle courant dans React consiste pour un composant à renvoyer plusieurs éléments. Les fragments vous permettent de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM.

Les fragments déclarés avec la syntaxe explicite peuvent avoir des clés. Un cas d'utilisation pour cela est le mappage d'une collection à un tableau de fragments - par exemple, pour créer une liste de description:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key est le seul attribut qui peut être passé à Fragment. À l'avenir, nous pourrions ajouter la prise en charge d'attributs supplémentaires, tels que les gestionnaires d'événements.

En outre, vous souhaiterez peut-être renvoyer plusieurs éléments de liste dans une fonction d'assistance à l'intérieur d'un composant React. Renvoyez simplement un tableau de nœuds html avec l' keyattribut:

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Vous pouvez utiliser createFragmentici.

https://facebook.github.io/react/docs/create-fragment.html

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(en utilisant la syntaxe ES6 et JSX ici)

vous devez d'abord ajouter le react-addons-create-fragmentpackage:

npm install --save react-addons-create-fragment

Avantage par rapport à la solution de Jan Olaf Krems: React ne se plaint pas des disparus key

Actualisé

Utilisez React Fragment. C'est simple. Lien vers la documentation des fragments.

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

Ancienne réponse - obsolète

Avec React> 16, vous pouvez utiliser react-composite .

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

Bien sûr, react-composite doit être installé.

npm install react-composite --save

C'est simple par fragment React <></>et React.Fragment:

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );