我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
JSX内部有多种循环方式
使用for循环函数TableBodyForLoop（props）{常量行=[]；//创建数组以存储tr列表for（设i=0；i<props.people.length；i++）{const person=道具.人物[i]；//将tr推到数组，关键是行.推(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>);}//返回tbody内的行return<tbody>｛rows｝</tbody>；}使用ES6阵列映射方法函数TableBody（props）{返回(<tbody>{props.people.map（person=>(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>))}</tbody>);}
完整示例：https://codesandbox.io/s/cocky-meitner-yztif
以下React文档将有所帮助
列表和键条件渲染
其他回答
我找到了另一个解决方案提供：
<tbody>{this.getcontent()}</tbody>
还有一个单独的功能：
getcontent() {
const bodyarea = this.state.movies.map(movies => (
<tr key={movies._id}>
<td>{movies.title}</td>
<td>{movies.genre.name}</td>
<td>{movies.numberInStock}</td>
<td>{movies.publishDate}</td>
<td>
<button
onClick={this.deletMovie.bind(this, movies._id)}
className="btn btn-danger"
>
Delete
</button>
</td>
</tr>
));
return bodyarea;
}
这个例子很容易解决许多问题。
如果您已经在使用lodash，_.times函数很方便。
import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, (i) => (
<li key={i}>repeated 3 times</li>
))}
</ol>
</div>
);
}
}
您需要向数组中添加元素并渲染元素数组。这有助于减少重新渲染组件所需的时间。
下面是一些可能有用的粗略代码：
MyClass extends Component {
constructor() {
super(props)
this.state = { elements: [] }
}
render() {
return (<tbody>{this.state.elements}<tbody>)
}
add() {
/*
* The line below is a cheap way of adding to an array in the state.
* 1) Add <tr> to this.state.elements
* 2) Trigger a lifecycle update.
*/
this.setState({
elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
})
}
}
你必须用JSX写：
<tbody>
{
objects.map((object, i) => (
<ObjectRow obj={object} key={i} />
));
}
</tbody>
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</tbody>;
}
诚然，这是一个很小的代码量，内联它可能会很好。
