React JSX内部回路

我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：

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

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

当前回答

可以在reactjs中对循环使用.map（）

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

2022-09-28 03:14:45

其他回答

<tbody>
   numrows.map((row,index) => (
      return <ObjectRow key={index}/>
   )
</tbody>

2019-03-22 11:29:19

ECMAScript 2015/Babel可能使用生成器函数创建JSX数组：

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

2016-12-28 15:47:09

如果你真的想要一个for循环等价物（你有一个数字，而不是一个数组），只需使用Lodash中的范围。

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

import range from 'lodash/range'

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

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

2021-05-02 08:18:58

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

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

2021-04-23 13:08:30

您可以尝试新的for of循环：

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

以下是几个示例：

2019-02-21 09:42:25

React JSX内部回路

推荐文章

最新文章

标签