Reactjs 从循环中进行反应渲染

我正在尝试做一些非常简单的事情，但它不能很好地处理我的代码。我可以看到它渲染，但只有3次，而不是9次

const renderTempBoxes = () => {
  for (var i = 0; i < 10; i++) {
    console.log('i = ', i);
    return <div className={styles.box} key={i} />;
  }
};

const Component = () => {
  return (
   {renderTempBoxes()}
  )
}

const rendertempboxs=（）=>{
对于（变量i=0；i<10；i++）{
log（'i='，i）；
返回；
}
};
常量组件=（）=>{
返回(
{rendertempboxs（）}
)
}

这甚至不起作用，当我只想渲染9个长方体时，使用数组就太过分了。 更新：

const Component = () => {
  return (
   <div>
     {
      [...Array(10)].map((x, i) => {
        console.log('i = ', i);
        return <div className={styles.box} key={i} />;
      })
     }
    </div>
  )
}

const组件=（）=>{
返回(
{
[…数组（10）].map（（x，i）=>{
log（'i='，i）；
返回；
})
}
)
}

第一个问题是，您不能像那样从

for

循环中返回单个元素。这不是特定的反应，这只是一个JavaScript问题。相反，您可以尝试使用以下方法来映射元素数组：

const renderTempBoxes = () => Array.from({ length: 10 }).map((v, i) => 
    <div className={styles.box} key={i}>{i}</div>
);

const Component = () => {
  return (
   <div>
     {renderTempBoxes()}
   </div>
  )
}

渲染元素：

const renderTempBoxes = () => Array.from({ length: 10 }).map((v, i) => 
    <div className={styles.box} key={i}>{i}</div>
);

const Component = () => {
  return (
   <div>
     {renderTempBoxes()}
   </div>
  )
}

示例的第二个问题是

不会真正渲染任何内容，它不是

之类的元素。相反，您需要将div元素作为

{whatever}

返回

关于语法

[…Array（10）]

，必须有一个处理/传输文件的网页

Array（10）

，

[…Array（10）]

，

[…new Array（10）]

，甚至“[…new Array（10）.keys（）”。答案中描述的任何一种方法都可以解决您的问题

---

我创建了一个用于演示功能的阵列。

当尝试多次渲染同一组件时，使用阵列在其上绘制贴图

export default class MyComp extends Component {

 constructor(props) {
  super(props)
  this.state = {
   array: [{key: 1, props: {...}}, {key: 2, props: {...}, ...]
  }
 }

 render () {
   return (
     <div>
      {this.state.array.map((element) => {
      return <div key={element.key} {...element.props}> 
     })}
     </div>
   )
 }
}

导出默认类MyComp扩展组件{
建造师（道具）{
超级（道具）
此.state={
数组：[{key:1，props:{…}，{key:2，props:{…}，]
}
}
渲染（）{
返回(
{this.state.array.map（（元素）=>{
返回
})}
)
}
}

---

请记住始终为渲染的每个组件设置一个唯一的键

正确，但我正在做一些快速而肮脏的事情，所以为什么要在我只想创建9个框的时候创建一个数组呢？在这种情况下，数组有点过火了。如果要像这样渲染多个组件，在某个时候需要将数组传递给渲染函数。另一个选项是创建一个数组，其中每个元素都是一个组件。但仍然是一个数组。如果以后您想要更多或更少的框，该怎么办？这样您只需要更新状态，所以您是说您在尝试渲染一定数量的div时只能使用数组？您不能使用for循环？我只是想做一些快速的事情，而不是sca现在不稳定。我很惊讶，只有数组才允许您渲染多个div。在我的第二个示例中，我使用数组只是为了测试，这给了我一个错误。警告：函数作为React子函数无效。如果您返回组件而不是从render返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。是的，你如何使用一个函数并返回9次？你可以看到，在另一个答案中，他也返回一个数组。你可以做的是使用for循环在另一个主Div中添加9个Div并返回主Div。这是有意义的，但在我的第二个示例中，我使用了一个数组。我将它更新为包装在一个Div中，但它仍然不起作用rk.{[…数组（10）].map（（x，i）=>{console.log（'i='，i）；return；}）}我将更新我的帖子以更清楚地展示它。很抱歉只是将代码粘贴到评论中。请查看中演示了这两种方法的作用以及

React.Fragment

。谢谢！所有这些都是有意义的，但我在第二个示例中所做的不是很相似。您的第二种方法实际上是相同的。我认为不是您的示例的问题是试图以

的形式返回元素。请尝试使用

{i}

或类似的自动关闭标记。当我尝试您的精确方法时，StackBlitz中没有呈现任何内容。我更新了它，它显示确实发生了问题。如果您以这种自动关闭方式呈现React组件，它会工作，但不会“”。