Javascript React预期标识符中的简单for循环

我是一个新的反应者，正在尝试实现一个简单的for循环，如另一个例子所示。然而，我似乎无法让它工作。我只想运行组件5次（或任意次数），而不是映射到数组或类似对象

演示：

举个例子：

index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Test from './test';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        for (var i=0; i < 5; i++) {
        <Test />
    } 
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入“/style.css”；
从“./Test”导入测试；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
对于（变量i=0；i<5；i++）{
} 
);
}
}
render（，document.getElementById（'root'））；

test.js

import React from "react";

export default function Test() {
  return (
    <p>test</p>
  );
}

从“React”导入React；
导出默认函数测试（）{
返回(
试验

);
}

谁能告诉我哪里出了问题？我试图复制另一个stackoverflow帖子，并尝试了

test（）

。我仍然得到这个错误：

index.js（18:27）标识符应为错误

---

谢谢您的帮助。

您不能在报税表中使用这样的for循环。我建议您为此使用映射并在数组上循环。只需创建一个数组并直接映射到该数组即可：

[...Array(totalSteps)].map(el => el {
  return (
    <Test />
)
})

[…数组（totalSteps）].map（el=>el{
返回(
)
})

你必须在{}中包围整个街区。这将创建totalSteps项目数组并返回totalSteps

。因此，如果totalSteps为5，则将渲染该组件5次。这就是最终组件的外观：

render() {
    return (
      <div>
      {[...Array(totalSteps)].map(el => el {
        return (
          <Test />
        )
      })}
      </div>
    );
  }

render（）{
返回(
{[…数组（totalSteps）].map（el=>el{
返回(
)
})}
);
}

您需要在JSX中返回一个值才能显示任何内容，以下是您的方法：

const Test=（）=>{
返回(
试验

);
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
{Array.from（Array（5））.map（el=>）}
);
}
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
您试图在JSX中使用纯Javascript。您的想法是正确的，但语法是错误的。相反，将Javascript代码（for循环）移出到
render（）
方法（在
return（）
上方）

render（）{
让项目=[]
for（设i=0；i<5；i++）{
items.push（）
}
返回(
{items}
);
}

这里需要注意的几点：


正在迭代的组件需要唯一的
键
属性。在这种情况下，我们可以使用当前值
i
元素可以在JSX中呈现，方法是将它们用大括号括起来，如上图所示<代码>{items}

---

JSX将接受任何有效的JavaScript表达式，也许这个源代码可以帮助您。您可以像其他同事所展示的那样创建声明性解决方案（以及最佳解决方案），还可以将命令式解决方案包装到函数或方法中

const Test=（）=>{
返回(
试验

);
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
createElements=（）=>{
常数elments=[]；
对于（变量i=0；i<5；i++）{
elments.push（）
} 
返回元素；
}
render（）{
返回(
{this.createElements（）}
);
}
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

Imo如果要使用
map
，最好使用
Array.fill（）。另外，将
undefined
分配给
el
也是不必要的。最后，
Array（totalSteps）.fill（）.map（（u，i）=>）
似乎更容易理解。还要注意，react child数组中的每个元素都应该有一个唯一的key属性。
render() {
  let items = []
  for (let i = 0; i < 5; i++) {
    items.push(<Test key={i} />)
  }

  return (
    <div>
      {items}
    </div>
  );
}