我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
function PriceList({ self }) {
let p = 10000;
let rows = [];
for(let i=0; i<p; i=i+50) {
let r = i + 50;
rows.push(<Dropdown.Item key={i} onClick={() => self.setState({ searchPrice: `${i}-${r}` })}>{i}-{r} ₺</Dropdown.Item>);
}
return rows;
}
<PriceList self={this} />
其他回答
如果您已经在使用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>
);
}
}
我不确定这是否适用于您的情况，但通常[map][1]是一个很好的答案。
如果这是使用for循环的代码：
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用map函数这样写：
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
objects.map是进行循环的最佳方式，objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法（它返回布尔值）。
假设您所在的州有一系列项目：
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
我找到了另一个解决方案提供：
<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;
}
这个例子很容易解决许多问题。
在映射中包含JSX内容可能是笨拙的语法。相反，您可以这样做：
const ObjectRow = ({ ... }) => <tr key={}>...</tr>
const TableBody = ({ objects }) => {
return <tbody>{objects.map(ObjectRow)}</tbody>;
}
这是
{ objects.map(object => ObjectRow(object))
如果将ObjectRow设置为使用对象中的相同键，这将非常有用。
注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。
更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。
