是否可以在React中打印16次

Question

我正在申请。例如，我尝试在以下代码中将字母“ a”打印16次。但这没有用。这是因为我确实使用“返回”。我知道。但是它不使用错误。如何打印字母“ a” 16次？

import React from "react";
import Game from "./game";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.Game = new Game();
    console.log(this.Game.play());
  }
  draw = () => {
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        return <div>a</div>;
      }
    }
  };
  componentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

Answer 1

您应该只给我们一个数组。填充数组，然后返回它，React将渲染组件数组。

import React from "react";
import Game from "./game";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.Game = new Game();
    console.log(this.Game.play());
  }
  draw = () => {
    let result = [];
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        result.push(<div>a</div>);
      }
    }
    return result;
  };
  componentDidMount = () => {
    this.draw();
  };
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

Answer 2

将return让你只能得到一个中止整个循环<div>。您需要构建所有，<div>并返回<div>元素数组或嵌套<div>16 <div>的单个元素。