ReactJS中for循环触发分号解析错误，该如何解决？

你遇到的Parsing error: Unexpected token是因为JSX只能包含表达式，不能直接放置for循环这类语句。JSX的渲染区域（<>和</>之间）只接受能返回值的表达式，而for循环是控制流语句，不符合这个要求。

下面是两种可行的解决方法：

方法一：使用数组map方法（React推荐方式） #

这是React中遍历数组渲染元素的标准做法，直接通过map生成JSX元素数组：

const resume = {
  interest: ['Drawing','Photography','Design','Programming','Computer Science'],
  skills: ['Web Design with React'],
  education: ['Wilton High School','Silvermine School of Arts','Codeacademy'],
  experience: ['Student Technology Intern for Wilton School','Babysitter'],
  extracurriculas: ['Recycling Club','Gardening Club','Book Club']
}

function App() {
  return (
    <>
      {resume.interest.map((interestItem, index) => (
        <h1 key={index}>{interestItem}</h1>
      ))}
    </>
  )
}

export default App;

• map方法会遍历数组，为每个元素返回一个<h1>节点，最终生成一个JSX元素数组，放在{}中即可被JSX解析渲染。
• key属性是React要求的必填项，用来帮助React识别元素的唯一性，避免渲染异常。如果数组元素有唯一ID，优先用ID当key，这里用index作为临时方案。

方法二：提前用for循环生成JSX数组 #

如果一定要使用for循环，可以先在组件函数内部生成JSX元素数组，再在返回的JSX中渲染这个数组：

const resume = {
  interest: ['Drawing','Photography','Design','Programming','Computer Science'],
  skills: ['Web Design with React'],
  education: ['Wilton High School','Silvermine School of Arts','Codeacademy'],
  experience: ['Student Technology Intern for Wilton School','Babysitter'],
  extracurriculas: ['Recycling Club','Gardening Club','Book Club']
}

function App() {
  const interestElements = [];
  const interestLength = resume.interest.length;
  
  for (let index = 0; index < interestLength; index++) {
    interestElements.push(<h1 key={index}>{resume.interest[index]}</h1>);
  }

  return (
    <>
      {interestElements}
    </>
  )
}

export default App;

• 先通过for循环把每个<h1>元素存入数组，再将数组作为表达式放在JSX中，这样就符合JSX的语法规则了。

内容的提问来源于stack exchange，提问作者Nischal Khanal