Uma linha funciona bem

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

não para várias linhas

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

Obrigado.

Tente pensar nas tags como chamadas de função (consulte a documentação ). Então o primeiro se torna:

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

E o segundo:

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

Agora deve estar claro que o segundo snippet realmente não faz sentido (você não pode retornar mais de um valor em JS). Você deve envolvê-lo em outro elemento (provavelmente o que você deseja, dessa forma, você também pode fornecer uma keypropriedade válida ) ou pode usar algo assim:

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

Com açúcar JSX:

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

Você não precisa nivelar o array resultante, o React fará isso para você. Veja o seguinte violino http://jsfiddle.net/mEB2V/1/ . Novamente: agrupar os dois elementos em uma div / seção provavelmente será melhor a longo prazo.

Parece que a velha resposta sobre retornar um array não se aplica mais (talvez desde React ~ 0.9, como @ dogmatic69 escreveu em um comentário ).

Os documentos dizem que você precisa retornar um único nó:

Número máximo de nós raiz JSX

Atualmente, na renderização de um componente, você só pode retornar um nó; se você tem, digamos, uma lista de divs para retornar, você deve agrupar seus componentes dentro de um div, span ou qualquer outro componente.

Não se esqueça de que JSX compila em JS regular; retornar duas funções realmente não faz sentido sintático. Da mesma forma, não coloque mais de uma criança em um ternário.

Em muitos casos, você pode simplesmente embrulhar as coisas em um <div>ou a <span>.

No meu caso, eu queria retornar vários <tr>s. Eu os embrulhei em uma <tbody>- uma mesa pode ter vários corpos.

EDITAR: a partir do React 16.0, retornar uma matriz aparentemente é permitido novamente, desde que cada elemento tenha um 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 permite cercar uma lista de elementos com <Fragment>…</Fragment>ou mesmo <>…</>, se você preferir isso a um array: https://blog.jmes.tech/react-fragment-and-semantic-html/

Do React v16.0.0 em diante, é possível retornar vários elementos envolvendo-os dentro de umArray

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

Também a partir do React v16.2.0 , um novo recurso chamado React Fragmentsé introduzido, que você pode usar para envolver vários elementos

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

Conforme a documentação:

Um padrão comum no React é um componente retornar vários elementos. Fragmentos permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM.

Fragmentos declarados com a sintaxe explícita podem ter chaves. Um caso de uso para isso é mapear uma coleção para uma matriz de fragmentos - por exemplo, para criar uma lista de descrição:

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 é o único atributo que pode ser passado para Fragment. No futuro, podemos adicionar suporte para atributos adicionais, como manipuladores de eventos.

Além disso, você pode querer retornar vários itens de lista em alguma função auxiliar dentro de um componente React. Basta retornar uma matriz de nós html com o keyatributo:

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

Você pode usar createFragmentaqui.

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

(usando ES6 e sintaxe JSX aqui)

primeiro você precisa adicionar o react-addons-create-fragmentpacote:

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

Vantagem sobre a solução de Jan Olaf Krems: reagir não reclamar dos desaparecidos key

Atualizada

Use React Fragment. É simples. Link para a documentação do fragmento.

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

Resposta antiga - obsoleta

Com React> 16, você pode usar o composto de reação .

import { Composite } from 'react-composite';

// ...

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

Obviamente, o composto reactivo deve ser instalado.

npm install react-composite --save

É simples por fragmento React <></>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>
        ),
      )}
    </>
  );