javascript - React 中的简单 for 循环需要标识符

Question

我是 React 新手，正在尝试实现一个简单的 for 循环，如其他 stackoverflow post 中所示.但是，我似乎无法让它发挥作用。我只想运行该组件 5 次(或任意次数)，而不是映射到数组或类似物上。

演示:https://stackblitz.com/edit/react-ekmvak

以这里为例:

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'));

测试.js

import React from "react";

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

谁能告诉我哪里出错了？我试图复制其他 stackoverflow 帖子并尝试 test() 也。我仍然收到此错误:

Error in index.js (18:27) Identifier expected.

在此感谢您的帮助。

Answer 1

您正在尝试在 JSX 中使用纯 Javascript。你有正确的想法，但你的语法是错误的。相反，将您的 Javascript 代码(for 循环)移到您的 render() 方法(在 return() 之上)

render() {
  let items = []
  for (let i = 0; i < 5; i++) {
    items.push(<Test key={i} />)
  }

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

这里有几点需要注意:

• 被迭代的组件需要一个唯一的 key 属性。在这种情况下，我们可以使用 i
的当前值
• 元素可以通过用大括号括起来在 JSX 中呈现，如上所示。 { 项目 }