<t车身> for（var i=0；i<numrows；i++）{ <对象行/> } </tbody> 
-
69 需要注意的是，在JSX中，JavaScript语法周围需要{}标记。 这可能会有帮助 facebook.github.io/react/docs/… . – 以赛亚灰 评论 2015年12月24日18:25 -
46 让todos=this.props.todos.map（（todo）=>{return<h1>{todo.title}</h1>}） – 过编码器 评论 2017年1月15日19:58 -
@OverCoder为什么要将整个返回放在{}标记中，它将是=>return<h1>{todo.title}</h1>不是吗？ – 普拉文·波德尔 评论 2020年3月17日7:41 -
13 @pravinpoudel实际上这个答案很古老，更像 让todos=this.props.todos.map（t=><h1>{t.title}</h1>） :) – 过编码器 评论 2020年3月17日上午10:16 -
“for”不返回值，您需要在示例中为JSX返回数组元素。 – 侯赛因·穆罕默德 评论 2020年10月1日16:15
85个答案
返回tbody( for（设i=0；i<numrows；i++）{ 对象行（） } ) 常量行=[]； for（设i=0；i<numrows；i++）{ rows.push（ObjectRow（））； } 返回tbody（行）； 常量行=[]； for（设i=0；i<numrows；i++）{ //注意：我们在这里添加了一个关键属性，以允许react唯一地标识每个属性 //元素。 请参见： https://reactjs.org/docs/lists-and-keys.html rows.push（＜ObjectRow键＝｛i｝/＞）； } 返回<tbody>{rows}</tbody>； 
使用ES2015（ES6）语法（排列和箭头函数）
<t车身> {[…数组（10）].map（（x，i）=> <ObjectRow键={i}/> )} </tbody> 香草ES5
阵列应用
<t车身> {Array.apply（0，Array（10））.map（函数（x，i）{ return<ObjectRow键={i}/>； })} </tbody> 内联IIFE
<t正文> {（函数（行、i、len）{ while（++i<=长度）{ rows.push（＜ObjectRow键＝｛i｝/＞） } 返回行； })([], 0, 10)} </tbody> 结合其他答案的技巧
渲染：函数（）{ var行=[]，i=0，len=10； while（++i<=len）行。push（i）； 返回( <t车身> {rows.map（函数（i）{ return<ObjectRow键={i}索引={i{/>； })} </tbody> ); } 使用ES2015语法& 阵列 方法
<t车身> {数组（10）.fill（1）.map（（el，i）=> <ObjectRow键={i}/> )} </tbody> 钥匙
-
2
<t车身> {items.map（item=><ObjectRow键={item.id}名称={items.name}/>）} </tbody> 
<t车身> {numrows.map（x=><ObjectRow键={x.id}/>）} </tbody>
map为 数组，并根据结果构造一个新数组。 回调 仅对具有赋值的数组的索引调用， 包括未定义的。 它不调用缺少的元素 数组（即从未设置的索引 删除或从未赋值）。
回调由三个参数调用：元素的值， 元素的索引和正在遍历的Array对象。
如果向映射提供thisArg参数，它将用作 回调就是这个值。 否则，未定义的值将用作 就是这个值。 回调最终观察到的这个值是 根据通常的规则确定 通过函数。
map不会改变调用它的数组（尽管 回调（如果调用的话）。
从“React”导入React，{Component}； 导入从“./Select”中选择； 从“lodash”导入； 导出默认类App extends Component{ 渲染（）{ 返回( <div className=“container”> <ol> {_.倍（3，（i）=>( 重复3次</li> ))} </ol> </div> ); } } 
-
2 仅导入 次 来自Lodash，而不是整个图书馆。 在开发期间，可以在Lodash发布更新时避免向后不兼容，但在生产中，导入整个库需要花费几秒钟的时间。 评论 2022年1月12日5:20 -
渲染（）{ 返回( <t车身> {数组（numrows）.fill（null）.map（（value，index）=>( <ObjectRow键={index}> ))} </tbody> ); } 渲染（）{ 让行=[]； for（设i=0；i<numrows；i++）{ push（<ObjectRow键={i}/>）； } 返回( <tbody>{rows} ); } 渲染（）{ 返回( <t车身> {(() => { 让行=[]； for（设i=0；i<numrows；i++）{ push（<ObjectRow键={i}/>）； } 返回行； })()} </tbody> ); } 渲染（）{ 返回( <t车身> {objectRows.map（（行，索引）=>( <ObjectRow键={index}数据={row}/> ))} </tbody> ); } 渲染（）{ 让行=[]； for（设i=0；i<objectRows.length；i++）{ rows.push（＜ObjectRow键＝｛i｝数据＝｛objectRows[i]｝/＞）； } 返回( <tbody>{rows} ); } 渲染（）{ 返回( <t正文> {(() => { 常量行=[]； for（设i=0；i<objectRows.length；i++）{ push（<ObjectRow键={i}数据={objectRows[i]}/>）； } 返回行； })()} </tbody> ); } 
<t车身> <ObjectRow rt-repeat=“objects中的obj”/> </tbody> 
<t车身> {objectArray.map（object=><ObjectRow键={object.id}对象={obbject.value}/>）} </tbody>
警告：数组或迭代器中的每个子级都应该有 独特的“钥匙”道具。
const{object}=this.props const对象=this.props.object 
<t正文> {numrows.map（item=><ObjectRow/>）} </tbody> 
如上所述，在 返回 将所有元素存储在数组中 内部循环 返回 方法1： 让容器=[]； 设arr=[1,2,3]//可以是任何数组、对象 arr.forEach（（val，索引）=>{ 容器.推送( <div键={index}> val值 </div>） /** * 1. 所有循环生成的元素都需要密钥 * 2. 数组中只能放置一个父元素 *例如，容器.推送( *<div键={index}> val值 </div> <div> 这将引发错误 </div> ) **/ }); 返回( <div> <div>这里有任何东西 <div>{container}</div> </div> ) 方法2： 返回( <div> <div>这里有任何东西 <div> { (() => { 让容器=[]； 设arr=[1,2,3]//可以是任何数组、对象 arr.forEach（（val，索引）=>{ 容器推送( <div键={index}> val值 </div>） }); 返回容器； })() } </div> </div> )
const FeatureList=（{features，onClickFeature，onClikLikes}）=>( <div className=“feature-list”> ｛features.map（feature=> <功能 key={feature.id} ｛…功能｝ onClickFeature={（）=>onClickFeature（feature.id）} onClickLikes={（）=>onClickLikes（feature.id）} /> )} </div> ); 
<t车身> { Array.from（数组（i））.map（（）=><对象行/>） } </tbody>
注：
反应。 子项.toArray（） 在展平子级列表时，更改键以保留嵌套数组的语义。 也就是说，toArray在返回的数组中为每个键添加前缀，以便每个元素的键的作用域都是包含它的输入数组。
<t正文> { 反应。 子级.to数组( Array.from（数组（i））.map（（）=><对象行/>） ) } </tbody> 
[{name:“item1”，id:1}，{name:”item2“，id:2}，}name:”tem3“，id:3}] <t车身> {this.state.items.map（（item）=>{ <ObjectRow键={item.id}名称={itet.name}/> })} </tbody> 
-
-
只是一个想法： {this.state.items？.map（（item）=> ，或我最喜欢的语法： {this.state.items&&this.state.items.map（（item）=> 并从中删除不必要的（） （项目） 因为只有一个参数。 异步呈现组件并且还没有导入本地状态会让您感到沮丧。 评论 2022年1月12日5:23 -
在这种情况下，它不会呈现任何内容。 您需要添加 返回 关键字在您的 {} 或需要删除 {} . {this.state.items.map（（item）=>{return（<ObjectRow键={item.id}名称={items.name}/>）}）} 或 {this.state.items.map（（item）=>（<ObjectRow键={item.id}名称={items.name}/>）} – 朱奈德·贾维德 评论 2023年5月19日8:05
函数*jsxLoop（次数，回调） { for（var i=0；i<次数；++i） 收益回调（i）； } ... <t车身> {[…jsxLoop（数行，i=> <ObjectRow键={i}/> )]} </tbody> 
2015年欧洲标准 阵列起始位置 使用地图功能+键
<t车身> {Array.from（{length:5}，（value，key）=><ObjectRow key={key}/>）} </tbody> 
渲染（）{ 常量映射项=[]； for（设i=0；i<项长度；i++） mapItem.prush（i）； const singleItem=>（项，索引）{ //item数组中的单个项 //数组中项目的索引 //可以在这里实现任何逻辑 返回( <对象行/> ) } 返回( {mapItem.map（singleItem）} ) } 
gridItems=this.state.applications.map（app=> <ApplicationItem key={app.Id}app={app}/> ); 
var Object_rows=[]； for（var i=0；i<numrows；i++）{ Object_rows.push（<ObjectRow/>）； } <tbody>{Object_rows}</tbody>； 
<t车身> ｛objects.map（（obj，index）=>＜ObjectRow obj＝｛obj｝key＝｛index｝/＞）｝ </tbody> 
功能项（道具）{ return<li>{props.message}</li>； } 函数TodoList（）{ const todos=['完成文档'，'提交pr'，'等待审核']； 返回( <ul> {todos.map（（message）=><项键={message}消息={mesage}/>）} </ul> ); } 函数render（）{ 返回( <t车身> {numrows.map（（roe，index）=><ObjectRow键={index}/>）} </tbody> ); } 
<t车身> ｛newArray.map（（）=>＜ObjectRow/＞）｝ </tbody> 
行=（）=>{ var行=[]； for（设i=0；i<numrows；i++）{ rows.push（<ObjectRow/>）； } 返回行； } <t车身> {this.row（）} </tbody> 
{[…new Array（n）].map（（item，index）=><MyComponent key={index}/>）} ｛[…new Array（n）].map（（_，index）=>＜MyComponent键＝｛index｝/＞）｝ 
从“lodash/range”导入范围 范围（4）； // => [0, 1, 2, 3] 范围（1,5）； // => [1, 2, 3, 4] 
返回<tbody> {(() => { let行=[] for（var i=0；i<numrows；i++）{ push（<ObjectRow键={i}/>） } 返回行 })()} </tbody> 