在React JSX中循环

Question

我正在尝试在React JSX中执行以下操作(其中ObjectRow是一个单独的组件):

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

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用.然而,来自模板领域并且是JSX的新手,我不确定如何实现上述(多次添加组件).

Answer 1

可以想象它就像你只是调用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的工作原理.

Answer 2

不确定这是否适用于您的情况,但通常地图是一个很好的答案.

如果这是你的代码与for循环:

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

你可以用map写这样的:

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

Answer 3

如果你还没有一个map()像@ FakeRainBrigand的答案那样的数组,并且想要内联这个,那么源布局对应的输出比@ SophieAlpert的答案更接近:

使用ES2015(ES6)语法(扩展和箭头功能)

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

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

回复:与Babel一起转发,其警告页面说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>
  );
}

使用ES2015语法和Array方法

有了Array.prototype.fill你能做到这一点,以替代使用作为传播上面所示:

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

(我认为你实际上可以省略任何参数fill(),但我不是100%.)感谢@FakeRainBrigand纠正我在早期版本的fill()解决方案中的错误(参见修订版).

key

在所有情况下,keyattr都会缓解开发构建的警告,但在子项中无法访问.如果您希望子项中的索引可用,则可以传递额外的attr.有关讨论,请参阅列表和密钥.

Answer 4

只需使用带有ES6语法的map Array方法:

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

别忘了这家key酒店.

Answer 5

使用数组映射函数是循环遍历元素数组并在React中根据它们创建组件的非常常见的方法,这是一个很好的方法来执行循环,这是在JSX中执行循环的非常有效和整洁的方式,它不是唯一的这样做的方法,但首选方式.

另外,不要忘记根据需要为每次迭代设置唯一的密钥.Map函数从0创建一个唯一索引,但不建议使用producd索引,但如果您的值是唯一的,或者如果有唯一键,则可以使用它们:

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

如果您不熟悉Array上的map函数,那么来自MDN的行也很少:

map按顺序为数组中的每个元素调用一次提供的回调函数,并从结果中构造一个新数组.仅对已分配值的数组的索引(包括undefined)调用回调.它不会被调用缺少数组的元素(即,从未设置过的索引,已删除的索引或从未赋值的索引).

使用三个参数调用回调:元素的值,元素的索引和遍历的Array对象.

如果提供thisArg参数进行映射,则它将用作回调的此值.否则,undefined值将用作此值.回调最终可观察到的该值根据用于确定函数所见的通常规则来确定.

map不会改变调用它的数组(尽管回调,如果被调用,可能会这样做).

Answer 6

如果您已经在使用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>
        );
    }
}

Answer 7

您还可以在返回块之外提取:

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

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

Answer 8

我知道这是一个旧线程,但你可能想要检查http://wix.github.io/react-templates/,它允许你使用jsx风格的模板作为反应,使用一些指令(例如rt-重复).

您的示例,如果您使用react-templates,将是:

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

Answer 9

有很多方法可以做到这一点.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循环:

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循环:

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

Answer 10

如果numrows是一个数组,那很简单.

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

React中的数组数据类型非常好,数组可以支持新数组,并支持过滤,减少等.

Answer 11

有几个答案指向使用该map声明.下面是一个完整的示例,它使用FeatureList组件中的迭代器,根据名为features的JSON数据结构列出Feature组件.

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

您可以在GitHub上查看完整的FeatureList代码.该功能夹具这里列出.

Answer 12

让我们说你们州里有一系列物品:

[{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>

Answer 13

...或者您也可以准备一个对象数组并将其映射到一个函数以获得所需的输出.我更喜欢这个,因为它有助于我保持编码的良好实践,在渲染的返回中没有逻辑.

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

Answer 14

只需使用.map()循环遍历您的集合并<ObjectRow>使用每次迭代的道具返回项目.

假设objects是某个阵列......

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

Answer 15

您可以在 React for循环中使用 .map()。

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

Answer 16

如果您选择这个转换内部回报率()的渲染方法,最简单的办法是使用地图()方法.使用map()函数将数组映射到JSX语法,如下所示(使用ES6语法).

内部父组件:

key

请注意const { object } = this.props添加到子组件的属性.如果未提供键属性,则可以在控制台上看到以下警告.

警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.

现在,在ObjectRow组件中,您可以从其属性访问该对象.

在ObjectRow组件内部

const object = this.props.object

要么

object

这应该给你拿,你从父组件传递给变量对象key中ObjectRow组件.现在,您可以根据您的目的吐出该对象中的值.

参考文献:

Javascript中的map()方法

ECMA Script 6或ES6

Answer 17

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>

Answer 18

我用这个:

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

PD:永远不会忘记密钥,否则你会收到很多警告!

Answer 19

我倾向于赞成编程逻辑发生在返回值之外的方法render.这有助于保持实际呈现的内容易于理解.

所以我可能会这样做:

import _ from 'lodash';

...

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

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

不可否认,这是一个很少的代码,内联它可能工作正常.

Answer 20

ES2015 Array.from与map函数+ key

如果你什么都没有.map(),你可以使用Array.from()与map重复元素:

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

Answer 21

要循环的次数和回报,你可以的帮助下实现它from和map:

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

哪里 i = number of times

Answer 22

您的JSX代码将编译为纯JavaScript代码,任何标记都将被ReactElement对象替换.在JavaScript中,您无法多次调用函数来收集返回的变量.

它是非法的,唯一的方法是使用数组来存储返回变量的函数.

或者您可以使用自JavaScript ES5以来Array.prototype.map可用的处理这种情况.

也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现像Angularng-repeat一样的重复函数.

Answer 23

您当然可以使用.map解决,如其他答案所示.如果您已经使用了babel,您可以考虑使用jsx-control-statements 它们需要一些设置,但我认为它在可读性方面是值得的(特别是对于非反应开发人员).如果使用linter,还有eslint-plugin-jsx-control-statements

Answer 24

如果您确实想要一个等效的for循环（您有一个数字，而不是数组），只需使用rangefrom Lodash。

不要重新发明轮子，也不要混淆你的代码。只需使用标准实用程序库即可。

import range from 'lodash/range'

range(4);
// => [0, 1, 2, 3]

range(1, 5);
// => [1, 2, 3, 4]

Answer 25

这可以通过多种方式完成.

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

Answer 26

这是一个简单的解决方案.

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

不需要映射和复杂的代码.您只需要将行推送到数组并返回值来呈现它.

Answer 27

由于您在JSX代码中编写Javascript语法,因此需要将Javascript包装在花括号中.

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

Answer 28

我喜欢它

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

Answer 29

这是React doc的示例：JavaScript表达式为子级

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

请注意，密钥非常重要，因为React使用密钥来区分数组中的数据。

Answer 30

随着时间的推移，语言变得越来越成熟，我们经常会遇到这样的常见问题。问题是循环一个组件“n”次。

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

其中， n - 是您想要循环的次数。item将是未定义的，并且index会像往常一样。此外，ESLint不鼓励使用数组索引作为键。

但是你的优点是不需要在之前初始化数组，最重要的是避免for循环......

为避免 item 为 undefined 带来的不便，您可以使用 an _，以便在 linting 时将其忽略并且不会抛出任何 linting 错误，例如

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

Answer 31

好问题.

当我想添加一定数量的组件时,我所做的是使用辅助函数.

定义一个返回JSX的函数:

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

//... in JSX

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

Answer 32

您还可以使用自调用功能:

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

           })()}
        </tbody>

Answer 33

Array.from是最好的方法。如果要创建具有一定长度的 JSX 数组。

function App() {
  return (
    <tbody>
      {Array.from({ length: 10 }, (_, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </tbody>
  );
}

上面的例子是当你没有数组的时候，所以如果你有一个数组，你应该像这样在 JSX 中映射它：

function App() {
  return (
    <tbody>
      {list.map((item, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </tbody>
  );
}

Answer 34

您可以执行以下操作：

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

Answer 35

React 元素是简单的 JavaScript，因此您可以遵循 JavaScript 的规则。您可以for在 JavaScript 中使用循环，如下所示：-

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

但有效且最好的方法是使用该.map函数。如下图所示：-

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

在这里，有一件事是必要的：定义密钥。否则它会抛出这样的警告：-

warning.js:36 警告：数组或迭代器中的每个子项都应该有一个唯一的“key”属性。检查 的渲染方法ComponentName。请参阅“链接”了解更多信息。

Answer 36

JSX 中的循环非常简单。尝试这个：

return this.state.data.map((item, index) => (
  <ComponentName key={index} data={item} />
));

Answer 37

以下是您可以在迭代对象数组或纯数组时做出的反应中可能的解决方案

const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
   rows.push(<ObjectRow key={data.id} name={data.name}/>);
});

<tbody>
    { rows }
</tbody>

要么

const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
   rows.push(<ObjectRow key={numrows[i]} />);
};

<tbody>
    { rows }
</tbody>

更新：

我最近熟悉的迭代对象数组的更好方法是直接在渲染中使用.map进行返回或不返回

.map与返回

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> {
             return <ObjectRow key={data.id} name={data.name}/>
       })}
</tbody>

.map不返回

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> (
             <ObjectRow key={data.id} name={data.name}/>
       ))}
</tbody>

Answer 38

即使这段代码也可以完成相同的工作。

<tbody>
   {array.map(i => 
      <ObjectRow key={i.id} name={i.name} />
   )}
</tbody>

Answer 39

使用地图功能。

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

Answer 40

您可以直接在 JSX 中执行相同的操作，使用 map 而不是 for-of 循​​环：

render: function() {
const items = ['one', 'two', 'three'];
 return (
  <ul>
     {items.map((value, index) => {
     return <li key={index}>{value}</li>
     })}
 </ul>
 )
}

Answer 41

只需做这样的事情：

<tbody>
    {new Array(numRows).fill("", 0, numRows).map((p, i) => <YourRaw key={i} />)}
</tbody>

Answer 42

好吧，你去。

{
 [1, 2, 3, 4, 5, 6].map((value, index) => {
  return <div key={index}>{value}</div>
 })
}

所有您需要做的，只需映射数组并返回您要渲染的任何内容，请不要忘记key在return元素中使用。

Answer 43

尝试这个

<tbody>
  {new Array(numrows).map((row,index)=><ObjectRow key={***someThingUniqe***}/>)} //don't use index as key 
</tbody>

如果你想知道为什么你不应该在反应中使用索引作为键，请检查 这个

Answer 44

return (
    <table>
       <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
       </tbody>
    </table>
);

Answer 45

如果您真的想在 JSX 中真正使用for循环，则可以使用IIFE。

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

Answer 46

@jacefarm如果我理解正确，则可以使用以下代码：

<tbody>
    { new Array(numrows).fill(<ObjectRow/>) } 
</tbody>

您可以使用以下代码：

<tbody>
   { new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) } 
</tbody>

和这个：

<tbody>
    new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>

Answer 47

在 React 中使用map是迭代数组的最佳实践。

为了防止ES6出现一些错误，React 中的语法映射如下所示：

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

这里你调用一个组件，<ObjectRow/>，所以你不需要在箭头后面加上括号。

但你也可以这样做：

{items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
))}

或者：

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果你在箭头后面放一个括号“{}”，React 不会抛出错误并且会显示白名单。

Answer 48

问题是您没有返回任何 JSX 元素。对于这种情况还有另一种解决方案，但我将提供最简单的一种：“使用地图功能”！

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

就是这么简单又美丽，不是吗？

Answer 49

每当您需要在JSX中放置任何JavaScript代码时，都应放置{}，而不要在这些括号中放置JavaScript代码。就这么简单。

这样，您可以在jsx / react内部循环。

说：

<tbody>
    {your piece of code in JavaScript }
</tbody>

例：

<tbody>
   { items.map((item) => {console.log(item)}) } // items looping using map
</tbody>

Answer 50

我找到了另一种遵循地图渲染的解决方案：

 <tbody>{this.getcontent()}</tbody>

还有一个单独的函数：

getcontent() {
    const bodyarea = this.state.movies.map(movies => (
        <tr key={movies._id}>
            <td>{movies.title}</td>
            <td>{movies.genre.name}</td>
            <td>{movies.numberInStock}</td>
            <td>{movies.publishDate}</td>
            <td>
                <button
                    onClick={this.deletMovie.bind(this, movies._id)}
                    className="btn btn-danger"
                >
                    Delete
                </button>
            </td>
        </tr>
    ));
    return bodyarea;
}

这个例子很容易解决很多问题。

Answer 51

如果没有键值参数，则用于打印数组值，然后使用以下代码-

<div>
    {my_arr.map(item => <div>{item} </div> )}                    
</div>

Answer 52

在 JSX 块中使用{}JavaScript 代码，使其正确执行您尝试执行的任何 JavaScript 操作。

<tr>
  <td>
    {data.map((item, index) => {
      {item}
    })}
  </td>
</tr>

这有点模糊，但您可以将数据交换为任何数组。这将为您提供每个项目的表格行和表格项目。如果数组的每个节点中只有一件事物，您将需要通过执行以下操作来专门针对该事物：

<td>{item.someProperty}</td>

在这种情况下，您将需要用不同的内容包围它td并以不同的方式排列前面的示例。

Answer 53

在迭代数组和生成 JSX 元素方面，已经发布了许多解决方案。它们都很好，但是它们都直接在循环中使用索引。我们建议使用数据中的唯一id作为键，但是当我们没有数组中每个对象的唯一id时，我们将使用索引作为键，但不建议直接使用索引作为键。

还有一件事为什么我们选择.map，但为什么不选择 .foEach 因为 .map 返回一个新数组。现在有不同的.map方法。

下面使用 .map 的不同版本详细说明了如何使用唯一键以及如何使用 .map 循环 JSX 元素。

当返回单个 JSX 元素和数据中的唯一 id 作为关键版本时，.map不返回：

const {objects} = this.state;

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

当返回多个 JSX 元素和数据中的唯一 id 作为关键版本时，.map不返回

const {objects} = this.state;

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

当返回单个 JSX 元素和索引作为键版本时，.map不返回：

const {objects} = this.state;

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

当返回多个 JSX 元素和索引作为键版本时，.map不返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
        <div key={`Key${index}`}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

当返回多个 JSX 元素和索引作为键版本时带有 return 的.map ：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
        return (
            <div key={`Key${index}`}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

当返回多个 JSX 元素和数据中的唯一 id 作为关键版本时，.map带有 return：

const {objects} = this.state;

<tbody>
    {objects.map(object => {
        return (
            <div key={object.id}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

另一种方法是

render() {
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
           <div key={object.id}>
               <ObjectRow obj={object} />
           </div>
       )
  })
  return(
      <div>
          <tbody>
              {objectItems}
          </tbody>
      </div>
   )
}

Answer 54

如果您想要使用存储为 -value 的特定行计数，则提供更直接的解决方案Integer。

在 的帮助下，typedArrays我们可以通过以下方式实现所需的解决方案。

// Let's create a typedArray with length of `numrows`-value
const typedArray = new Int8Array(numrows); // typedArray.length is now 2
const rows = []; // Prepare rows-array
for (let arrKey in typedArray) { // Iterate keys of typedArray
  rows.push(<ObjectRow key={arrKey} />); // Push to an rows-array
}
// Return rows
return <tbody>{rows}</tbody>;

Answer 55

您可以尝试新的for循环

const apple = {
   color: 'red',
   size: 'medium',
   weight: 12,
   sugar: 10
}
for (const prop of apple.entries()){
   console.log(prop);
}

这里有几个例子：

Answer 56

除非您声明一个函数并用参数将其括起来，否则这是不可能的。在JSXExpression，你只能写表达式，不能写的语句如为（），声明变量或类，或if（）语句。

这就是为什么函数 CallExpressions 如此受欢迎的原因。我的建议是：习惯它们。这就是我会做的：

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

过滤：

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

如果（）：

var names = getNames()
const people = {names && names.length &&
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

如果别的：

var names = getNames()
const people = {names && names.length ?
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

Answer 57

您可以创建一个新组件，如下所示：

将密钥和数据传递给您的ObjectRow组件，如下所示：

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

创建一个新组件ObjectRowList以充当数据容器：

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

Answer 58

我不确定这是否适用于您的情况，但通常 [map][1] 是一个很好的答案。

如果这是您的for循环代码：

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

你可以用map函数这样写：

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

objects.map是循环objects.filter的最佳方式，也是过滤所需数据的最佳方式。过滤后的数据会形成一个新的数组，objects.some是检查数组是否满足给定条件（返回布尔值）的最佳方式。

Answer 59

您可以执行以下操作来重复组件numrows次数

<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>

Answer 60

这是我迄今为止在大多数项目中使用的：

const length = 5;
...
<tbody>
    {Array.from({ length }).map((_,i) => (
        <ObjectRow key={i}/>
    ))}
</tbody>

Answer 61

请尝试这个

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

或者

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

Answer 62

你可以在reactjs中使用.map() for循环

    <tbody>
        {items.map((value, index) => {
          return <li key={index}>{value}</li>
        })}
      </tbody>
)

Answer 63

一行（假设 numrows 是一个数字）：

<tbody>
  {
    Array(numrows).fill().map(function (v, i) {
      return <ObjectRow/>
    })
  }
</tbody>