Tek satır iyi çalışıyor

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

birden çok hat için değil

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

Teşekkürler.

Etiketleri işlev çağrıları olarak düşünmeye çalışın ( dokümanlara bakın ). Sonra ilki şu olur:

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

Ve ikincisi:

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

Şimdi, ikinci kod parçacığının gerçekten anlamlı olmadığı anlaşılmalıdır (JS'de birden fazla değer döndüremezsiniz). Ya başka bir öğeye sarmalısınız (büyük olasılıkla ne isterseniz, bu şekilde geçerli bir keymülk de sağlayabilirsiniz ) ya da şöyle bir şey kullanabilirsiniz:

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

JSX şekeri ile:

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

Ortaya çıkan diziyi düzleştirmenize gerek yok, React bunu sizin için yapacak. Aşağıdaki keman bölümüne bakın http://jsfiddle.net/mEB2V/1/ . Tekrar: İki öğeyi bir div / bölüme sarmak büyük olasılıkla uzun vadede daha iyi olacaktır.

Görünüşe göre bir diziyi döndürmekle ilgili eski cevap artık geçerli değil (belki React ~ 0.9'dan beri, @ dogmatic69'un bir yorumda yazdığı gibi ).

Dokümanlar , tek bir düğüm döndürmeniz gerektiğini söylüyor:

Maksimum JSX Kök Düğümü Sayısı

Şu anda, bir bileşenin işlemesinde yalnızca bir düğüm döndürebilirsiniz; Örneğin, döndürülecek bir div listeniz varsa, bileşenlerinizi bir div, span veya başka bir bileşenin içine sarmalısınız.

JSX'in normal JS'de derlendiğini unutmayın; iki işlevi döndürmek gerçekten sözdizimsel bir anlam ifade etmez. Aynı şekilde, üç çocuğa birden fazla çocuk koymayın.

Çoğu durumda, her şeyi a <div>veya a'ya sarabilirsiniz <span>.

Benim durumumda, birden çok <tr>e- postayı döndürmek istedim . Onları bir <tbody>- bir masanın birden fazla gövdeye sahip olmasına izin veriliyor.

DÜZENLEME: React 16.0'dan itibaren, her öğenin bir key: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html olması koşuluyla, bir dizi döndürmeye görünürde tekrar izin verilir # new-render-return-types-fragments-and-strings

DÜZENLEME: 16.2 Birlikte öğelerin listesini çevreleyen sağlar Tepki <Fragment>…</Fragment>hatta <>…</>, bir diziye tercih edin: https://blog.jmes.tech/react-fragment-and-semantic-html/

Gönderen v16.0.0 Tepki itibaren, bir dahilinde sarılarak Dönüş birden elemanları mümkündürArray

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

Ayrıca React v16.2.0'dan , React Fragmentsbirden fazla öğeyi sarmak için kullanabileceğiniz yeni bir özellik tanıtıldı.

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

Belgelere göre:

React'teki yaygın bir model, bir bileşenin birden fazla öğe döndürmesidir. Parçalar, DOM'a fazladan düğüm eklemeden bir alt öğe listesini gruplamanıza olanak tanır.

Açık sözdizimi ile bildirilen parçalar anahtarlara sahip olabilir. Bunun bir kullanım örneği, bir koleksiyonun bir dizi parçayla eşleştirilmesidir - örneğin, bir açıklama listesi oluşturmak için:

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

anahtar, Fragment'a aktarılabilen tek özelliktir. Gelecekte, olay işleyicileri gibi ek özellikler için destek ekleyebiliriz.

Ayrıca, bir React bileşeni içindeki bazı yardımcı işlevlerde birkaç liste öğesi döndürmek isteyebilirsiniz. keyÖzniteliğe sahip bir dizi html düğümünü döndürmeniz yeterlidir:

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

Güncellenmiş

React Fragment kullanın. Basit. Bağlantı parçası belgelerine.

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

Eski cevap - eski

React> 16 ile react-composite kullanabilirsiniz .

import { Composite } from 'react-composite';

// ...

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

Elbette react-composite'in yüklenmesi gerekiyor.

npm install react-composite --save

createFragmentBurada kullanabilirsiniz .

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

(burada ES6 ve JSX sözdizimini kullanarak)

önce react-addons-create-fragmentpaketi eklemelisiniz :

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

Jan Olaf Krems'in çözümüne göre avantaj: Eksiklerden şikayetçi değil key

React fragmanı ile basittir <></>ve React.Fragment:

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