是否可以在 React 中打印 16 次

Question

我正在申请。例如，我尝试在以下代码中打印字母“a”16 次。但它没有用。这是因为我确实使用了“return”。我知道。但它不使用错误。如何将字母“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>s 并返回 <div> 元素的数组或单个 <div> 元素，其中嵌套了 16 个 <div>s。

Answer 3

你需要使用数组原型中的fill 方法，所以你可以在你的渲染方法中这样做

  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{Array(16).fill("a").map((letter, index) => <div key={index}>{letter}</div>)}</p>
      </div>
    );
  }

Answer 4

您不需要显式调用绘图方法，因为渲染方法会执行该操作。当 props 对象更改时，此方法会自动调用。所以你不需要用componentDidMount 调用它，你可以把它留在渲染方法中，因为每次自动调用render() 时都会调用this.draw()。

解决您的核心问题：您的 this.draw 方法将始终返回 <div>a</div>，因为您将 return 语句放在您的双 for 循环中，因此当它到达该行时总是会返回（并且不会继续循环） .

首先，您会想要创建一个组件数组，而不是尝试返回一个组件：

draw = () => {
  let output = [];
  for (let a = 0; a < 4; a++) {
    for (let b = 0; b < 4; b++) {
      output.push(<div>a</div>);
    }
  }
  return output;
};

由于您似乎在制作游戏，因此这可能无法按照您想要的方式进行。我想您正在尝试制作网格，因为您使用了 2 个 for 循环。您需要在表格中定义它，或者使用支持网格格式的组件。

所以要回答您的主要问题，如果您尝试打印 '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 = () => {
    let output = [];
    for (let a = 0; a < 4; a++) {
      for (let b = 0; b < 4; b++) {
        output.push(<div>a</div>);
      }
    }
    return output;
  };

  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <p>{this.draw()}</p>
      </div>
    );
  }
}

export default App;

Answer 5

它不起作用，因为当您在 for 语句中点击第一个 return 时，它会返回它并跳过其余部分。

要工作，您必须返回一个 jsx 元素数组。像这样的：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    b: ['b','b','b','b','b','b','b','b','b','b']
    }
  }
  draw () {
    return this.state.b.map(elm=>{
        return <div>{elm}</div>;
    });

  }
  render() {
    return (
      <div>
        <h2>2048 Game With React</h2>
        <div>{this.draw()}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

Answer 6

试试这个！

draw = () => {
html = '';
for (let a = 0; a < 4; a++) {
  for (let b = 0; b < 4; b++) {
    html +='<div>'+a+'</div>';
  }
}
return html;
};