发布于 2年前

在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>
  );
}
©2020 edoou.com   京ICP备16001874号-3