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

我正在尝试制作一款需要13*13盒的棋盘游戏机。我有一个box类，它打印出一个正方形按钮，并渲染它。代码如下：

class Box extends React.Component{
  render(){
    return(
      <button className="square">
        
      </button>
    );
    
  }
}

问题是当我试图用Board类打印多个方框时。显然，这个代码不起作用。我不明白为什么。任何见解都会有所帮助

class Board extends React.Component{
  render(){
    return(
      {this.renderRow}
    );
  }
  renderRow(){
    for(let i= 0; i < 13; i++){
      return(
        <Box />
      );
    }
  }
}

似乎连盒子都坏了。只有当我注释出Board类时，Box类才起作用

将{this.renderRow}更改为this.renderRow inside Board:render解决了更新1中提到的即使是Box类也不会渲染的问题。新代码是：

class Board extends React.Component{
  render(){
    return(
      (this.renderRow)
    );
  }
  renderRow(){
    return(
        <Box />
    );
  }
}

---

这里没有什么问题。当前没有任何东西调用renderRow方法+它返回单个项而不是数组行。要修复单行渲染，可以：

class Board extends React.Component{
  render(){
    return this.renderRow();
  }
  renderRow() {
    return Array.from({ length: 13 }, (_, i) => <Box key={i} />)
  }
}

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

---

这里没有什么问题。当前没有任何东西调用renderRow方法+它返回单个项而不是数组行。要修复单行渲染，可以：

class Board extends React.Component{
  render(){
    return this.renderRow();
  }
  renderRow() {
    return Array.from({ length: 13 }, (_, i) => <Box key={i} />)
  }
}

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

这是伦德罗。你忘了。 您还会发现，由于框中缺少key属性，react将开始在控制台中向您提供错误。你忘了。

---

此外，您会发现react将开始在控制台上给您错误，因为该框上缺少键属性

Hi，可能是这样的。renderRow在您的板内：render？是的，肯定是@HalilÇakar。要调用一个函数，您需要在render中使用。对我来说也是一样的。但我不知道哪里错了。显然，Board类内部有问题。“但我似乎找不到它。”“是的，你的意见很有帮助。检查更新2。谢谢，会是这样吗。你的棋盘里的renderRow:render？是的，肯定是这样，@HalilÇakar。要调用一个函数，您需要在render中使用。对我来说也是一样的。但我不知道哪里错了。显然，Board类内部有问题。“但我似乎找不到它。”“是的，你的意见很有帮助。检查更新2。谢谢，我试过这样的东西。知道它为什么不起作用吗？renderRow{return for let i=0；i<13；i++{}；}正如我前面提到的，它像一个符咒一样返回单个项目。但我不明白这个，我不同意。这是一个映射函数，用于调用数组中的每个元素。我们不关心项目本身，只关心索引，所以每个框都有不同的键。更多信息在这里，我正在尝试这样的东西。知道它为什么不起作用吗？renderRow{return for let i=0；i<13；i++{}；}正如我前面提到的，它像一个符咒一样返回单个项目。但我不明白这个，我不同意。这是一个映射函数，用于调用数组中的每个元素。我们不关心项目本身，只关心索引，所以每个框都有不同的键。更多信息请点击这里