Garis tunggal berfungsi dengan baik

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

bukan untuk beberapa baris

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

Terima kasih.

Cobalah untuk menganggap tag sebagai panggilan fungsi (lihat dokumen ). Kemudian yang pertama menjadi:

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

Dan yang kedua:

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

Sekarang seharusnya sudah jelas bahwa cuplikan kedua tidak benar-benar masuk akal (Anda tidak dapat mengembalikan lebih dari satu nilai di JS). Anda harus membungkusnya dengan elemen lain (kemungkinan besar apa yang Anda inginkan, dengan begitu Anda juga dapat memberikan keyproperti yang valid ), atau Anda dapat menggunakan sesuatu seperti ini:

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

Dengan gula JSX:

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

Anda tidak perlu meratakan array yang dihasilkan, React akan melakukannya untuk Anda. Lihat biola berikut http://jsfiddle.net/mEB2V/1/ . Sekali lagi: Membungkus kedua elemen menjadi div / bagian kemungkinan besar akan lebih baik untuk jangka panjang.

Sepertinya jawaban lama tentang mengembalikan array tidak lagi berlaku (mungkin sejak React ~ 0.9, seperti yang ditulis @ dogmatic69 dalam komentar ).

Dokumen mengatakan Anda perlu mengembalikan satu node:

Jumlah Maksimum Root Node JSX

Saat ini, dalam render komponen, Anda hanya dapat mengembalikan satu node; Jika Anda memiliki, katakanlah, daftar div untuk dikembalikan, Anda harus menggabungkan komponen Anda dalam div, span, atau komponen lainnya.

Jangan lupa bahwa JSX dikompilasi menjadi JS biasa; mengembalikan dua fungsi tidak benar-benar masuk akal secara sintaksis. Demikian pula, jangan letakkan lebih dari satu anak di terner.

Dalam banyak kasus, Anda cukup membungkus sesuatu dalam a <div>atau a <span>.

Dalam kasus saya, saya ingin mengembalikan beberapa <tr>s. Saya membungkusnya dalam sebuah <tbody>- tabel diperbolehkan untuk memiliki banyak badan.

EDIT: Pada React 16.0, mengembalikan array tampaknya diizinkan lagi, selama setiap elemen memiliki 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 memungkinkan Anda mengelilingi daftar elemen dengan <Fragment>…</Fragment>atau bahkan <>…</>, jika Anda lebih suka itu daripada array: https://blog.jmes.tech/react-fragment-and-semantic-html/

Dari React v16.0.0 dan seterusnya, dimungkinkan untuk mengembalikan banyak elemen dengan membungkusnya di dalam fileArray

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

Juga dari React v16.2.0 , fitur baru bernama React Fragmentsdiperkenalkan yang dapat Anda gunakan untuk membungkus banyak elemen

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

Sesuai dokumentasi:

Pola umum di React adalah komponen mengembalikan banyak elemen. Fragmen memungkinkan Anda mengelompokkan daftar anak-anak tanpa menambahkan node tambahan ke DOM.

Fragmen yang dideklarasikan dengan sintaks eksplisit mungkin memiliki kunci. Contoh penggunaan untuk ini adalah memetakan koleksi ke array fragmen - misalnya, untuk membuat daftar deskripsi:

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 adalah satu-satunya atribut yang dapat diteruskan ke Fragment. Di masa mendatang, kami mungkin menambahkan dukungan untuk atribut tambahan, seperti pengendali event.

Juga, Anda mungkin ingin mengembalikan beberapa item daftar di beberapa fungsi pembantu di dalam komponen React. Cukup kembalikan array node html dengan keyatribut:

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

Anda dapat menggunakan di createFragmentsini.

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

(menggunakan sintaks ES6 dan JSX di sini)

Anda harus menambahkan react-addons-create-fragmentpaket terlebih dahulu:

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

Keuntungan dari solusi Jan Olaf Krems: bereaksi tidak mengeluh tentang yang hilang key

Diperbarui

Gunakan React Fragment. Itu mudah. Tautan ke dokumentasi fragmen.

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

Jawaban lama - usang

Dengan React> 16 Anda dapat menggunakan react-composite .

import { Composite } from 'react-composite';

// ...

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

Tentu saja, react-composite harus dipasang.

npm install react-composite --save

Ini sederhana dengan fragmen React <></>dan React.Fragment:

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