javascript - 在while循环中渲染jsx

Question

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

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

标签： javascriptreactjsjsx

Answer 1

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

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

请注意，将key属性包含在数组中每个条目的顶级元素上很重要。React 需要它来避免不必要的重新渲染和 DOM 操作。更多在这里。请注意，如果数组的内容会随着时间而改变，那么仅使用索引通常不是最佳实践。