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

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{&nbsp; render(){&nbsp; &nbsp; return this.renderRow();&nbsp; }&nbsp; renderRow() {&nbsp; &nbsp; return Array.from({ length: 13 }, (_, i) => <Box key={i} />)&nbsp; }}现在我们创建一个包含 13 个框的数组。试试codesandbox

Answer 2

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