在while循环中渲染jsx

Question

如何使用while循环渲染元素。

while(condition){
return (<div> {something} <div>);
}

Answer 1

通常在这种情况下，您构建一个数组并返回它：

const result = [];
while (condition) {
result.push(<div key={appropriateKeyForThisSomething}>{something}</div>);
}
return result;

请注意，在数组中每个条目的顶级元素上包含key属性非常重要。React需要它来避免不必要的重新渲染和DOM操作。点击此处了解更多信息。请注意，如果数组的内容会随着时间的推移而变化，那么仅仅使用索引通常不是最佳做法。

Answer 2

react文档建议使用Array.prototype.map将数组转换为JSX。

如果你只想使用while循环，那么T.J就为你提供了合适的解决方案。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);

链接到列表的反应文档