Javascript 将JSX片段与HTML连接起来，然后呈现累积结果

我试图重写电路板，使用两个循环来制作正方形，而不是硬编码。我已经尝试连接这些jsx片段，我不能像附加字符串一样附加它们。如有任何见解或帮助，将不胜感激。先谢谢你 这第一段代码是我尝试过的，它告诉我一个对象是无效的React子错误。

类板扩展React.Component{
renderSquare（一）{
返回这个.props.onClick（i）}/>；
}
render（）{
设board=null；
对于（变量i=0；i<9；i+=3）
{
设row={this.renderSquare（i）}{this.renderSquare（i+1）}{this.renderSquare（i+2）}
board={{board}{{row}；
}
返回(
{董事会}
);
}
}

JSX转换为

React.createElement（…）

函数调用。这些返回的是对象，而不是字符串，因此不能将它们连接起来

只需创建一个元素数组：

  render() {
    const rows = [];
    for(var i = 0; i < 9; i+=3)
    {
        rows.push(
          <div key={i} className="board-row">
            {this.renderSquare(i)}
            {this.renderSquare(i+1)}
            {this.renderSquare(i+2)}}
          </div>
        );
    }

    return (
        <div>
            {rows}
        </div>
    );
  }

React告诉您，它不知道如何渲染任意对象

也许你想要

board = <div>{board}{row}</div>;

board={board}{row}；

---

相反（

board

和

row

毕竟是React元素，所以这是可行的），但这不会产生您想要的元素结构。

谢谢Felix，我很感谢您向我详细解释，并介绍我需要了解的基本原理的概念。我可以看到您在div中使用了key属性，但是它在没有key属性的情况下也可以工作。你能帮我理解为什么这个关键属性可能是needed@TonyKo：请参阅链接。我想这能更好地解释这一点。简而言之：react需要知道如何用新数据更新现有元素。当您实际处理数据列表时，使用循环索引通常不是一个好的值用法，但是您的用例不同。好吧，酷。感谢菲利克斯和苏珊特的帮助！感谢大家学习本react教程，我发现了一个非常有用的示例，其中包含了由kelanwu完成的所有额外步骤：

board = <div>{{board: board}}{{row: row}}</div>; 

board = <div>{board}{row}</div>;