For Loop 可能不会渲染组件答案

【问题标题】：For Loop doesn't render components probablyFor Loop 可能不会渲染组件
【发布时间】：2020-04-11 08:50:31
【问题描述】：

我面临的问题是我希望一个组件被渲染得与我在 for 循环中分配的一样多，在这个例子中 5 次，

for (var k = 0; k <= 5; k++) {
      return(
           <div>Hi</div>
      )
}

但它只渲染一次，有什么想法吗？

【问题讨论】：

你的return 退出循环。您需要收集所有并在循环后将它们全部返回
我该怎么做？
这取决于你想做什么，你是想将 div 添加到 DOM 中吗？

标签： javascript reactjs for-loop

【解决方案1】：

您可以在 react 中使用列表和键。请尝试这样

const list = Array(5).fill("Hi")
const elems = list.map((item ,i) => {
    return <div key={i}>{item}</div>
})

display elems in your template like this

{elems}

【讨论】：

【解决方案2】：

您的循环在遇到 return 语句时立即退出。您需要返回所有要渲染的值才能使其工作。 map 在这里比 for 循环更好，因为 map 返回一个新数组。

你可以这样做：

{
    Array(5).fill('Hi').map((item, i) => <div key={i}>{item}</div>
}

首先，我使用Array(5) 创建一个包含 5 个项目的数组。然后用Hi 填充所有值。然后使用数组上的映射来迭代并为数组中的每个条目返回一个 div。

在反应中，您需要在创建元素列表时添加键。 "key" 是一个特殊的字符串属性，您需要为重复元素包括在内。你可以在这里了解更多信息：https://reactjs.org/docs/lists-and-keys.html

【讨论】：

【解决方案3】：

你不能使用for循环来渲染jsx，你必须使用这样的地图：

{Array(5).fill(0).map((_, i) => <div key={i}>Hi</div>)}

【讨论】：