使用另一个类打印一个类的多个实例

Question

我正在尝试制作一个需要 13*13 盒子的棋盘游戏（Ludo）。我有一个盒子类，可以打印出一个方形按钮并渲染它工作正常。下面的代码：class Box extends React.Component{  render(){    return(      <button className="square">              </button>    );      }}问题是当我尝试使用 Board 类打印多个 Box 时。显然这段代码不起作用。我不知道为什么。任何见解都会有所帮助。class Board extends React.Component{  render(){    return(      {this.renderRow}    );  }  renderRow(){    for(let i= 0; i < 13; i++){      return(        <Box />      );    }  }}好像连盒子都不工作了。只有当我注释掉 Board 类时，Box 类才有效。在 Board:render 内从 {this.renderRow} 更改为 (this.renderRow) 解决了即使 Box 类也不会渲染的问题（如更新 1 中所述）。新代码是：class Board extends React.Component{  render(){    return(      (this.renderRow)    );  }  renderRow(){    return(        <Box />    );  }}

Answer 1

这里的问题很少。目前没有调用renderRow方法+它返回单个项目而不是数组（行）。要修复单行渲染，您可以：

class Board extends React.Component{

  render(){

    return this.renderRow();

  }

  renderRow() {

    return Array.from({ length: 13 }, (_, i) => <Box key={i} />)

  }

}

现在我们创建一个包含 13 个框的数组。

试试codesandbox

Answer 2

this.renderRow(). 你忘记了()。key此外，由于Box 上缺少该属性，您还会发现 react 将开始在控制台中为您提供错误