La singola riga funziona bene

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

non per più righe

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

Grazie.

Prova a pensare ai tag come a chiamate di funzioni (vedi documenti ). Quindi il primo diventa:

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

E il secondo:

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

Ora dovrebbe essere chiaro che il secondo snippet non ha davvero senso (non puoi restituire più di un valore in JS). Devi racchiuderlo in un altro elemento (molto probabilmente quello che vorresti, in questo modo puoi anche fornire una keyproprietà valida ), oppure puoi usare qualcosa del genere:

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

Con lo zucchero JSX:

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

Non è necessario appiattire l'array risultante, React lo farà per te. Vedi il seguente violino http://jsfiddle.net/mEB2V/1/ . Ancora: avvolgere i due elementi in un div / sezione sarà molto probabilmente migliore a lungo termine.

Sembra che la vecchia risposta sulla restituzione di un array non si applichi più (forse da React ~ 0.9, come ha scritto @ dogmatic69 in un commento ).

I documenti dicono che devi restituire un singolo nodo:

Numero massimo di nodi root JSX

Attualmente, nel rendering di un componente, puoi restituire solo un nodo; se hai, ad esempio, un elenco di div da restituire, devi racchiudere i tuoi componenti all'interno di un div, span o qualsiasi altro componente.

Non dimenticare che JSX si compila in JS regolare; restituire due funzioni non ha davvero senso sintattico. Allo stesso modo, non mettere più di un bambino in un ternario.

In molti casi puoi semplicemente racchiudere le cose in a <div>o a <span>.

Nel mio caso, volevo restituire più messaggi di posta <tr>elettronica. Li ho avvolti in un <tbody>- un tavolo può avere più corpi.

EDIT: A partire da React 16.0, la restituzione di un array è apparentemente nuovamente consentita, a condizione che ogni elemento abbia 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 ti consente di racchiudere un elenco di elementi con <Fragment>…</Fragment>o anche <>…</>, se lo preferisci a un array: https://blog.jmes.tech/react-fragment-and-semantic-html/

Da React v16.0.0 in poi, è possibile restituire più elementi avvolgendoli in un fileArray

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

Sempre da React v16.2.0 , React Fragmentsviene introdotta una nuova funzionalità chiamata che puoi usare per avvolgere più elementi

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

Come da documentazione:

Un modello comune in React è che un componente restituisca più elementi. I frammenti ti consentono di raggruppare un elenco di figli senza aggiungere nodi extra al DOM.

I frammenti dichiarati con la sintassi esplicita possono avere chiavi. Un caso d'uso per questo è la mappatura di una raccolta su un array di frammenti, ad esempio per creare un elenco di descrizioni:

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 è l'unico attributo che può essere passato a Fragment. In futuro, potremmo aggiungere il supporto per attributi aggiuntivi, come i gestori di eventi.

Inoltre, potresti voler restituire diversi elementi della lista in qualche funzione di supporto all'interno di un componente React. Basta restituire un array di nodi html con l' keyattributo:

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>,
    ]
  }
}

Puoi usare createFragmentqui.

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

(utilizzando la sintassi ES6 e JSX qui)

devi prima aggiungere il react-addons-create-fragmentpacchetto:

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

Vantaggio rispetto alla soluzione di Jan Olaf Krems: reagire non si lamenta del disperso key

Aggiornato

Usa React Fragment. È semplice. Collegamento alla documentazione del frammento.

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

Vecchia risposta - obsoleta

Con React> 16 puoi utilizzare il composito reattivo .

import { Composite } from 'react-composite';

// ...

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

Ovviamente, deve essere installato reattivo.

npm install react-composite --save

È semplice con React fragment <></>e React.Fragment:

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