我正在React中尝试做类似以下的事情JSX(其中ObjectRow是一个单独的组件):
JSX
<tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody>
我意识到并理解为什么这是无效的JSX,因为它JSX映射到函数调用。但是,由于来自模板领域并且是的新手JSX,所以我不确定如何实现上述目标(多次添加组件)。
就像您只是在调用JavaScript函数一样。您不能使用for循环来调用函数的参数:
for
return tbody( for (var i = 0; i < numrows; i++) { ObjectRow() } )
查看如何将函数作为参数tbody传递给for循环,这当然是语法错误。
tbody
但是您可以创建一个数组,然后将其作为参数传递:
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示例转换成的示例。与[BabelREPL]一起玩,以了解JSX的工作方式。