React中用for循环在div内渲染组件报错，求解决方法

错误原因 #

JSX语法中只能嵌入表达式，不能直接放置for这类语句，你直接在<div>里写(for (var i=0; i <4; i++) {<StarIcon />})属于语法违规，所以触发了"Unexpected token"的解析错误。

可行解决方案 #

下面是几种重复渲染<StarIcon />4次的正确写法：

方法1：用Array.from生成数组后map渲染

<div>
  {Array.from({ length: 4 }, (_, index) => (
    <StarIcon key={index} />
  ))}
</div>

Array.from({ length: 4 })会创建一个长度为4的数组，通过map遍历数组，每次返回一个<StarIcon />组件，key是React列表渲染必须的标识，这里用数组索引即可。

方法2：先通过for循环生成组件数组，再嵌入JSX

// 先在组件逻辑里生成数组
const starComponents = [];
for (let i = 0; i < 4; i++) {
  starComponents.push(<StarIcon key={i} />);
}

// 在JSX中渲染数组
<div>{starComponents}</div>

先把需要重复的组件通过for循环存入数组，再将整个数组嵌入JSX，因为数组属于表达式，符合JSX语法要求。

方法3：用Array.fill结合map渲染

<div>
  {Array(4).fill(null).map((_, index) => (
    <StarIcon key={index} />
  ))}
</div>

Array(4)创建长度为4的空数组，fill(null)填充后才能正常使用map（空数组的map不会执行），之后遍历渲染组件即可。

内容的提问来源于stack exchange，提问作者Mayank Rawat