在React JSX中循环 [英] Loop inside React JSX

问题描述

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

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component):

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

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

I realize and understand why this isn't valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).

推荐答案

把它想象成你只是调用JavaScript函数。您不能在函数调用中为循环设置：

Think of it like you're just calling JavaScript functions. You can't put a for loop inside a function call:

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

但你可以制作一个数组，然后将其传递给：

But you can make an array, and then pass that in:

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

---

使用时，您可以使用基本相同的结构JSX：

---

You can use basically the same structure when working with 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的工作原理。

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

这篇关于在React JSX中循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！