<t车身> for(var i=0;i<numrows;i++){ <对象行/> } </tbody>
-
70 需要注意的是,在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 @事实上,这个答案很古老,更像是 让todos=this.props.todos.map(t=><h1>{t.title}</h1>) :) – 过编码器 评论 2020年3月17日10:16 -
“for”不返回值,您需要在示例中为JSX返回数组元素。 – 侯赛因·穆罕默德 评论 2020年10月1日16:15
86个答案
返回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 push(<ObjectRow键={i}/>); } 返回<tbody>{rows}</tbody>;
<t车身> for(var i=0;i<对象长度;i++){ <ObjectRow obj={objects[i]}键={i}> } </tbody>
<t车身> {对象.map(函数(对象,i){ return<ObjectRow obj={object}key={i}/>; })} </tbody>
<t车身> {objects.map((object,i)=><ObjectRow obj={object}key={i}/>)} </tbody>
-
79 -
28 -
-
三 如果嵌套组件具有删除事件,请不要将索引用作键。 – 用户11100667 评论 2022年1月12日5:18
使用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)=>( <li key={i}>重复3次</li> ))} </ol> </div> ); } }
渲染(){ 返回( <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++){ push(<ObjectRow键={i}数据={objectRows[i]}/>); } 返回( <tbody>{rows} ); }
渲染(){ 返回( <t车身> {(() => { 常量行=[]; for(设i=0;i<objectRows.length;i++){ push(<ObjectRow键={i}数据={objectRows[i]}/>); } 返回行; })()} </tbody> ); }
渲染:函数(){ var行=[]; for(var i=0;i<numrows;i++){ push(<ObjectRow键={i}/>); } 返回(<tbody>{rows}</tbody>); }
<t车身> {objectArray.map(object=><ObjectRow key={object.id}object={object.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,index)=>{ 容器.推送( <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(Array(i)).map(()=><ObjectRow/>) ) } </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)=> 并从中删除不必要的() (项目) 因为只有一个参数。 异步呈现组件并且还没有导入本地状态会让您感到沮丧。 – 用户11100667 评论 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
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)} ) }
var对象行=[]; 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>
从“lodash”导入; ... const TableBody=({对象})=>{ const objectRows=对象.map(obj=><对象行对象={obj}/>); return<tbody>{objectRows}</tbody>; }
功能项(道具){ return<li>{props.message}</li>; } 函数TodoList(){ const todos=['finish doc','submit pr','nag dan to review']; 返回( <ul> {todos.map((message)=><项键={message}消息={mesage}/>)} </ul> ); }
函数render(){ 返回( <t车身> {numrows.map((roe,index)=><ObjectRow键={index}/>)} </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数组(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>