ฉันพยายามทำสิ่งต่อไปนี้ใน React JSX(โดยที่ ObjectRow เป็นส่วนประกอบแยกต่างหาก):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

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

ลองคิดดูว่าคุณแค่เรียกใช้ฟังก์ชัน JavaScript คุณไม่สามารถใช้การforวนซ้ำที่การขัดแย้งกับการเรียกใช้ฟังก์ชัน:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

มาดูกันว่าฟังก์ชั่นtbodyนี้ถูกส่งผ่านforลูปเป็นอาร์กิวเมนต์และแน่นอนว่าเป็นข้อผิดพลาดทางไวยากรณ์

แต่คุณสามารถสร้างอาร์เรย์จากนั้นส่งผ่านสิ่งนั้นในรูปแบบอาร์กิวเมนต์:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

คุณสามารถใช้โครงสร้างเดียวกันโดยทั่วไปเมื่อทำงานกับ JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

อนึ่งตัวอย่าง JavaScript ของฉันเกือบจะเหมือนกับสิ่งที่ตัวอย่างของ JSX แปลงเป็น ลองเล่นกับBabel REPLเพื่อทำความเข้าใจว่า JSX ทำงานอย่างไร

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

หากนี่เป็นรหัสของคุณด้วย for for loop:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

คุณสามารถเขียนแบบนี้ด้วยแผนที่ :

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ไวยากรณ์ ES6:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

หากคุณยังไม่มีอาร์เรย์ที่map()ชอบคำตอบของ @ FakeRainBrigand และต้องการอินไลน์เพื่อให้เค้าโครงแหล่งที่มาสอดคล้องกับเอาต์พุตใกล้กว่าคำตอบของ @ SophieAlpert:

ด้วย ES2015 (ES6) ไวยากรณ์ (ฟังก์ชั่นการแพร่กระจายและลูกศร)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Re: transpiling กับบาเบลของหน้าคำเตือนบอกว่าArray.fromเป็นสิ่งจำเป็นสำหรับการแพร่กระจาย แต่ในปัจจุบัน ( v5.8.23) Arrayที่ดูเหมือนจะไม่เป็นกรณีที่เมื่อการแพร่กระจายที่เกิดขึ้นจริง ฉันมีปัญหาเอกสารเปิดให้ชี้แจงว่า แต่ใช้ความเสี่ยงของคุณเองหรือ polyfill

วานิลลา ES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

IIFE แบบอินไลน์

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

การผสมผสานของเทคนิคจากคำตอบอื่น ๆ

รักษาเลย์เอาต์ของแหล่งข้อมูลให้สอดคล้องกับเอาท์พุท แต่ทำให้ส่วนที่มีขนาดกะทัดรัดยิ่งขึ้น

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ด้วยไวยากรณ์และArrayวิธีการES2015

ด้วยArray.prototype.fillคุณสามารถทำสิ่งนี้แทนการใช้สเปรดดังที่แสดงด้านบน:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(ฉันคิดว่าคุณสามารถละเว้นการโต้แย้งได้fill()แต่ฉันไม่ได้ 100% เลย) ขอบคุณ @FakeRainBrigand สำหรับการแก้ไขข้อผิดพลาดของฉันในfill()โซลูชันรุ่นก่อนหน้า(ดูการแก้ไข)

key

ในทุกกรณีkeyattr จะลดการเตือนด้วยการสร้างการพัฒนา แต่ไม่สามารถเข้าถึงได้ในเด็ก คุณสามารถผ่าน attr พิเศษถ้าคุณต้องการให้ดัชนีมีอยู่ในเด็ก ดูรายการและกุญแจสำหรับการสนทนา

เพียงใช้วิธีmap Arrayด้วยไวยากรณ์ ES6:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

อย่าลืมkeyทรัพย์สิน

ใช้แผนที่อาร์เรย์ฟังก์ชั่นเป็นวิธีที่ใช้กันมากที่จะห่วงผ่านอาร์เรย์ขององค์ประกอบและสร้างส่วนประกอบตามพวกเขาในการตอบสนองนี้เป็นวิธีที่ดีในการทำวงซึ่งเป็นรักที่มีประสิทธิภาพและวิธีที่เป็นระเบียบเรียบร้อยในการทำลูปของคุณในJSXมันไม่ได้เท่านั้น วิธีที่จะทำ แต่วิธีที่ต้องการ

นอกจากนี้อย่าลืมว่ามีคีย์เฉพาะสำหรับแต่ละการวนซ้ำตามที่ต้องการ ฟังก์ชั่นแผนที่สร้างดัชนีที่ไม่ซ้ำกันจาก 0 แต่ไม่แนะนำให้ใช้กับดัชนีที่ผลิต แต่ถ้าค่าของคุณไม่ซ้ำกันหรือมีคีย์ที่ไม่ซ้ำกันคุณสามารถใช้พวกเขา:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

นอกจากนี้ไม่กี่บรรทัดจากMDNถ้าคุณไม่คุ้นเคยกับฟังก์ชั่นแผนที่บน Array:

แผนที่เรียกฟังก์ชั่นการโทรกลับที่จัดไว้ให้หนึ่งครั้งสำหรับแต่ละองค์ประกอบในอาร์เรย์ตามลำดับและสร้างอาร์เรย์ใหม่จากผลลัพธ์ การเรียกกลับถูกเรียกใช้เฉพาะสำหรับดัชนีของอาร์เรย์ที่มีค่าที่กำหนดรวมถึงไม่ได้กำหนด มันไม่ได้ถูกเรียกสำหรับอิลิเมนต์ที่หายไปของอาเรย์ (นั่นคือดัชนีที่ไม่เคยถูกตั้งค่าซึ่งถูกลบไปแล้วหรือที่ไม่เคยได้รับการกำหนดค่า)

การเรียกกลับถูกเรียกด้วยสามอาร์กิวเมนต์: ค่าขององค์ประกอบ, ดัชนีขององค์ประกอบและวัตถุ Array ที่ถูกสำรวจ

หากพารามิเตอร์ thisArg มีการจัดทำแผนที่จะใช้เป็นค่าโทรกลับของค่านี้ มิฉะนั้นค่าที่ไม่ได้กำหนดจะถูกใช้เป็นค่านี้ ค่านี้ในท้ายที่สุดสามารถสังเกตได้โดยการโทรกลับจะถูกกำหนดตามกฎปกติสำหรับการพิจารณาสิ่งนี้เห็นโดยฟังก์ชั่น

แผนที่ไม่ได้กลายพันธุ์อาเรย์ที่มันถูกเรียก (แม้ว่าการโทรกลับถ้าถูกเรียกอาจทำเช่นนั้น)

หากคุณใช้ lodash อยู่แล้ว_.timesฟังก์ชันจะมีประโยชน์

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}

คุณสามารถแยกออกนอกบล็อกการส่งคืน:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

ฉันรู้ว่านี่เป็นเธรดเก่า แต่คุณอาจต้องการเช็คเอาต์เทมเพลต Reactซึ่งจะช่วยให้คุณใช้เทมเพลตสไตล์ jsx ในการตอบสนองพร้อมกับคำสั่งบางอย่าง (เช่น rt-repeat)

ตัวอย่างของคุณถ้าคุณใช้ react-templates จะเป็น:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

การทำเช่นนี้มีหลายวิธี ในที่สุด JSX จะถูกรวบรวมไปยัง JavaScript ดังนั้นตราบใดที่คุณเขียน JavaScript ที่ถูกต้องคุณก็จะทำได้ดี

คำตอบของฉันมุ่งหวังที่จะรวมวิธีที่ยอดเยี่ยมทั้งหมดที่มีอยู่แล้วที่นี่:

หากคุณไม่มีอาร์เรย์ของวัตถุเพียงจำนวนแถว:

ภายในreturnบล็อกการสร้างArrayและการใช้Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

นอกreturnบล็อกเพียงใช้ JavaScript for-loop ปกติ:

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

การแสดงออกของฟังก์ชั่นที่เรียกใช้ทันที:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

หากคุณมีอาเรย์ของวัตถุ

ภายในreturnบล็อก.map()แต่ละวัตถุไปยัง<ObjectRow>ส่วนประกอบ:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

นอกreturnบล็อกเพียงใช้ JavaScript for-loop ปกติ:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

การแสดงออกของฟังก์ชั่นที่เรียกใช้ทันที:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

ถ้า numrows เป็นอาร์เรย์และมันง่ายมาก

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

Array data type ใน React นั้นดีกว่าอาเรย์สามารถสำรองอาเรย์ใหม่และตัวกรองการสนับสนุนลด ฯลฯ

มีหลายคำตอบที่ชี้ไปยังการใช้mapคำสั่ง นี่คือตัวอย่างที่สมบูรณ์โดยใช้ตัววนซ้ำภายในส่วนประกอบFeatureListเพื่อแสดงFeatureส่วนประกอบอยู่บนพื้นฐานของโครงสร้างข้อมูล JSON เรียกว่าคุณสมบัติ

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

คุณสามารถดูรหัส FeatureListสมบูรณ์บน GitHub คุณสมบัติติดตั้งอยู่ที่นี่

ในการวนซ้ำหลายครั้งและกลับมาคุณสามารถทำได้ด้วยความช่วยเหลือfromและmap:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

ที่ไหน i = number of times

หากคุณต้องการกำหนดรหัสคีย์ที่ไม่ซ้ำให้กับคอมโพเนนต์ที่แสดงผลคุณสามารถใช้React.Children.toArrayตามที่เสนอในเอกสารตอบโต้

React.Children.toArray

ส่งคืนโครงสร้างข้อมูลทึบแสงเด็ก ๆ เป็นอาเรย์แบนพร้อมคีย์ที่กำหนดให้กับเด็กแต่ละคน มีประโยชน์ถ้าคุณต้องการจัดการคอลเลกชันของเด็ก ๆ ในวิธีการเรนเดอร์โดยเฉพาะอย่างยิ่งถ้าคุณต้องการเรียงลำดับใหม่หรือแบ่งส่วนนี้

บันทึก:

React.Children.toArray()เปลี่ยนคีย์เพื่อรักษาซีแมนทิกส์ของอาร์เรย์ที่ซ้อนกันเมื่อรายชื่อแบนของเด็ก ๆ นั่นคือ toArray นำหน้าแต่ละคีย์ในอาร์เรย์ที่ส่งคืนเพื่อให้คีย์ของแต่ละองค์ประกอบถูกกำหนดขอบเขตไปยังอาร์เรย์อินพุตที่มีอยู่

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

หากคุณเลือกที่จะแปลงภายในนี้ผลตอบแทน ()ของการแสดงผลวิธีการเลือกที่ง่ายที่สุดจะใช้แผนที่ ()วิธีการ แม็พอาร์เรย์ของคุณลงในไวยากรณ์ JSX โดยใช้ฟังก์ชั่น map () ดังที่แสดงด้านล่าง ( ใช้ไวยากรณ์ ES6 )

ส่วนประกอบภายในของผู้ปกครอง :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

โปรดทราบว่าkeyแอตทริบิวต์ที่เพิ่มไปยังองค์ประกอบลูกของคุณ หากคุณไม่ได้ระบุแอตทริบิวต์ที่สำคัญคุณสามารถดูคำเตือนต่อไปนี้บนคอนโซลของคุณ

คำเตือน: เด็กแต่ละคนในอาร์เรย์หรือตัววนซ้ำควรมีเสา "คีย์" ที่ไม่ซ้ำกัน

หมายเหตุ:หนึ่งคนทำผิดพลาดทำคือใช้indexเป็นกุญแจสำคัญเมื่อ iterating ใช้indexขององค์ประกอบเป็นกุญแจสำคัญคือการป้องกันรูปแบบและคุณสามารถอ่านเพิ่มเติมได้ที่นี่ กล่าวโดยย่อถ้าไม่ใช่รายการคงที่ไม่เคยใช้indexเป็นกุญแจ

ตอนนี้ที่องค์ประกอบObjectRowคุณสามารถเข้าถึงวัตถุได้จากคุณสมบัติ

องค์ประกอบ Inside ObjectRow

const { object } = this.props

หรือ

const object = this.props.object

สิ่งนี้ควรดึงข้อมูลวัตถุที่คุณส่งจากคอมโพเนนต์พาเรนต์ไปยังตัวแปรobjectในองค์ประกอบObjectRow ตอนนี้คุณสามารถคายค่าในวัตถุนั้นตามวัตถุประสงค์ของคุณ

การอ้างอิง:

วิธีการ map () ใน Javascript

ECMA Script 6 หรือ ES6

ให้เราบอกว่าเรามีรายการอยู่ในสถานะของคุณ:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

ความเป็นไปได้ของ ES2015 / Babel กำลังใช้ฟังก์ชันตัวสร้างเพื่อสร้างอาร์เรย์ของ JSX:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

... หรือคุณสามารถเตรียมชุดของวัตถุและแมปไปยังฟังก์ชันเพื่อให้ได้ผลลัพธ์ที่ต้องการ ฉันชอบสิ่งนี้เพราะมันช่วยให้ฉันรักษาแนวปฏิบัติที่ดีในการเขียนโค้ดโดยไม่ต้องใช้ตรรกะในการกลับมาแสดงผล

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

เพียงใช้.map()วนรอบคอลเลกชันของคุณและส่งคืน<ObjectRow>สินค้าพร้อมอุปกรณ์ประกอบฉากจากการทำซ้ำแต่ละครั้ง

สมมติว่าobjectsเป็นอาเรย์ที่ไหนสักแห่ง ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

ES2015 Array.fromพร้อมฟังก์ชันแผนที่ + แป้น

หากคุณไม่มีอะไรที่.map()คุณสามารถใช้Array.from()กับmapฟังก์ชั่นการทำซ้ำองค์ประกอบ:

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

ฉันใช้สิ่งนี้:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS: อย่าลืมกุญแจหรือคุณจะได้รับคำเตือนมากมาย!

renderฉันมักจะชอบวิธีการที่โปรแกรมตรรกะที่เกิดขึ้นนอกค่าตอบแทนของ สิ่งนี้จะช่วยรักษาสิ่งที่แสดงผลได้ง่าย

ดังนั้นฉันอาจทำสิ่งที่ชอบ:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

เป็นที่ยอมรับว่าเป็นรหัสจำนวนเล็กน้อยที่ฝังไว้ซึ่งอาจทำงานได้ดี

แน่นอนคุณสามารถแก้ปัญหาด้วย. map ตามที่แนะนำโดยคำตอบอื่น ๆ หากคุณใช้ Babel อยู่แล้วคุณสามารถคิดถึงการใช้jsx-control-statements พวกเขาต้องการการตั้งค่าเล็กน้อย แต่ฉันคิดว่ามันมีค่าในแง่ของความสามารถในการอ่าน (โดยเฉพาะสำหรับนักพัฒนาที่ไม่ตอบสนอง) หากคุณใช้ linter ยังมีeslint-plugin-jsx-control-statement

รหัส JSX ของคุณจะรวบรวมเป็นรหัส JavaScript บริสุทธิ์แท็กใด ๆ จะถูกแทนที่ด้วยReactElementวัตถุ ใน JavaScript คุณไม่สามารถเรียกใช้ฟังก์ชันได้หลายครั้งเพื่อรวบรวมตัวแปรที่ส่งคืน

เป็นสิ่งผิดกฎหมายวิธีเดียวคือใช้อาร์เรย์เพื่อเก็บฟังก์ชันที่ส่งคืนตัวแปร

หรือคุณสามารถใช้Array.prototype.mapซึ่งมีให้ตั้งแต่ JavaScript ES5เพื่อจัดการสถานการณ์นี้

บางทีเราสามารถเขียนคอมไพเลอร์อื่น ๆ เพื่อสร้างไวยากรณ์ JSX ใหม่ที่จะใช้ฟังก์ชั่นการทำซ้ำเช่นเดียวกับของเชิงมุมng-repeat

สามารถทำได้หลายวิธี

1. ตามที่แนะนำข้างต้นก่อนที่จะreturnเก็บองค์ประกอบทั้งหมดในอาร์เรย์

2. วนเข้าไปด้านใน return

   วิธีที่ 1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )

   วิธีที่ 2

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )

นี่เป็นวิธีแก้ปัญหาง่ายๆ

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.push(<ObjectRow/>)
} 
<tbody>
  {Object_rows}
</tbody>

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

เนื่องจากคุณกำลังเขียนไวยากรณ์ Javascript ภายในโค้ด JSX คุณต้องล้อม Javascript ของคุณด้วยเครื่องหมายปีกกา

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>

นี่คือตัวอย่างจาก React doc: Expressions JavaScript as Children

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

ในกรณีของคุณฉันขอแนะนำให้เขียนดังนี้:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

โปรดสังเกตว่าคีย์มีความสำคัญมากเพราะใช้คีย์เพื่อทำซ้ำข้อมูลในอาร์เรย์

ฉันใช้มันเหมือน

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

คุณสามารถทำสิ่งที่ชอบ:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

เป็นคำถามที่ดีมาก

ฉันจะทำอย่างไรเมื่อฉันต้องการเพิ่มจำนวนองค์ประกอบให้ใช้ฟังก์ชั่นตัวช่วย

กำหนดฟังก์ชั่นที่ส่งคืน JSX:

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

คุณยังสามารถใช้ฟังก์ชั่นที่เรียกตนเองได้:

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>