สายเดี่ยวใช้งานได้ดี

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

ไม่ใช่สำหรับหลายบรรทัด

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

ขอบคุณ.

ลองคิดว่าแท็กเป็นการเรียกใช้ฟังก์ชัน (ดูเอกสาร ) จากนั้นคนแรกจะกลายเป็น:

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

และอันที่สอง:

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

ตอนนี้ควรชัดเจนแล้วว่าตัวอย่างข้อมูลที่สองไม่สมเหตุสมผลจริงๆ (คุณไม่สามารถคืนค่ามากกว่าหนึ่งค่าใน JS) คุณต้องรวมไว้ในองค์ประกอบอื่น (ส่วนใหญ่จะเป็นสิ่งที่คุณต้องการวิธีนั้นคุณสามารถระบุkeyคุณสมบัติที่ถูกต้องได้) หรือคุณสามารถใช้สิ่งนี้

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

ด้วยน้ำตาล JSX:

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

คุณไม่จำเป็นต้องแบนอาร์เรย์ผลลัพธ์ React จะทำเพื่อคุณ ดูต่อไปนี้ซอhttp://jsfiddle.net/mEB2V/1/ อีกครั้ง: การรวมทั้งสององค์ประกอบลงใน div / section มักจะดีกว่าในระยะยาว

ดูเหมือนว่าคำตอบเก่าเกี่ยวกับการส่งคืนอาร์เรย์จะใช้ไม่ได้อีกต่อไป (อาจจะเป็นเพราะ React ~ 0.9 ตามที่ @ dogmatic69 เขียนไว้ในความคิดเห็น )

เอกสารบอกว่าคุณต้องส่งคืนโหนดเดียว:

จำนวนโหนดราก JSX สูงสุด

ขณะนี้ในการเรนเดอร์ของคอมโพเนนต์คุณสามารถส่งคืนโหนดได้เพียงโหนดเดียว หากคุณมีรายการ div ที่จะส่งคืนคุณต้องรวมส่วนประกอบของคุณไว้ใน div, span หรือส่วนประกอบอื่น ๆ

อย่าลืมว่า JSX คอมไพล์เป็น JS ปกติ การส่งคืนฟังก์ชันสองฟังก์ชันไม่ได้ทำให้เกิดความรู้สึกทางวากยสัมพันธ์ ในทำนองเดียวกันอย่าใส่ลูกมากกว่าหนึ่งคนใน ternary

ในหลาย ๆ กรณีคุณสามารถห่อสิ่งของเป็น<div>ไฟล์<span>.

ในกรณีของฉันฉันต้องการส่งคืนหลาย<tr>ตัว ฉันห่อไว้ใน<tbody>ตาราง - อนุญาตให้มีหลายร่าง

แก้ไข: ในการตอบสนอง 16.0 การส่งคืนอาร์เรย์จะได้รับอนุญาตอีกครั้งตราบเท่าที่แต่ละองค์ประกอบมีkey: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html # new-render-return-types-fragments-and-strings

แก้ไข: React 16.2 ช่วยให้คุณสามารถล้อมรอบรายการองค์ประกอบที่มี<Fragment>…</Fragment>หรือแม้กระทั่ง<>…</>หากคุณต้องการให้อาร์เรย์: https://blog.jmes.tech/react-fragment-and-semantic-html/

จาก React v16.0.0เป็นต้นไปคุณสามารถส่งคืนองค์ประกอบหลายรายการได้โดยการรวมไว้ในไฟล์Array

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

นอกจากนี้จากReact v16.2.0ยังมีReact Fragmentsการนำเสนอคุณลักษณะใหม่ที่เรียกว่าซึ่งคุณสามารถใช้เพื่อรวมหลายองค์ประกอบได้

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

ตามเอกสาร:

รูปแบบทั่วไปใน React มีไว้สำหรับคอมโพเนนต์ที่จะส่งคืนหลายองค์ประกอบ แฟรกเมนต์ช่วยให้คุณจัดกลุ่มรายชื่อเด็กโดยไม่ต้องเพิ่มโหนดเพิ่มเติมใน DOM

แฟรกเมนต์ที่ประกาศด้วยไวยากรณ์ที่ชัดเจนอาจมีคีย์ กรณีการใช้งานสำหรับสิ่งนี้คือการแม็พคอลเลกชันกับอาร์เรย์ของแฟรกเมนต์ - ตัวอย่างเช่นเพื่อสร้างรายการคำอธิบาย:

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

คีย์เป็นแอตทริบิวต์เดียวที่สามารถส่งผ่านไปยัง Fragment ได้ ในอนาคตเราอาจเพิ่มการสนับสนุนสำหรับแอตทริบิวต์เพิ่มเติมเช่นตัวจัดการเหตุการณ์

นอกจากนี้คุณอาจต้องการส่งคืนรายการหลายรายการในฟังก์ชันตัวช่วยบางอย่างภายในองค์ประกอบการตอบสนอง เพียงส่งคืนอาร์เรย์ของโหนด html ที่มีkeyแอตทริบิวต์:

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

อัปเดตแล้ว

ใช้ React Fragment เป็นเรื่องง่าย ลิงก์ไปยังเอกสารส่วนย่อย

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

คำตอบเก่า - ล้าสมัย

ด้วยการตอบสนอง> 16 คุณใช้งานสามารถตอบสนองคอมโพสิต

import { Composite } from 'react-composite';

// ...

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

แน่นอนว่าต้องติดตั้ง react-composite

npm install react-composite --save

คุณสามารถใช้createFragmentที่นี่

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

(ใช้ไวยากรณ์ ES6 และ JSX ที่นี่)

คุณต้องเพิ่มreact-addons-create-fragmentแพ็คเกจก่อน:

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

ข้อได้เปรียบเหนือโซลูชันของ Jan Olaf Krems: ตอบสนองไม่บ่นเกี่ยวกับสิ่งที่หายไป key

มันง่ายมากโดย React fragment <></>และReact.Fragment:

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