在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。

案例

假设有一个表格组件，和一个行组件<ObjectRow />，现在需要在表格组件里循环生成行组件<ObjectRow />。

是不能直接在jsx里使用for循环，这里介绍两种方法：map函数和立即执行函数。

方法一：使用map函数

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

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

如果是使用ES6语法，可以使用箭头函数：

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

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

方法二：使用立即执行函数（IIFE）

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

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