背景：我正在阅读官方的React教程（https://reactjs.org/tutorial/tutorial.html），但使用的是ReasonmL（ReasonReact v。0.9.1）。这是一个井字游戏。经典游戏是在3x3板上玩的，我可以使用它，但是现在我试图将其扩展为任意的正方形板尺寸。我为3x3硬编码板提供的代码如下：

let renderSquare = (...) =>
  <Square ... />;

[@react.component]
let make = (~onClick,~squares,~winner) => {
...
  let render = i =>
    renderSquare(...);
  
  <div>
    <div classname="board-row"> {render(0)} {render(1)} {render(2)} </div>
    <div classname="board-row"> {render(3)} {render(4)} {render(5)} </div>
    <div classname="board-row"> {render(6)} {render(7)} {render(8)} </div>
  </div>;

Square是我的另一个组件。我要实现的目标是在板的每一行中添加任意数量的Square，并具有任意数量的行。

到目前为止，我没有想到什么，因为我不知道如何将数组React.element或列表作为子级传递给<div />。显示此问题的最小代码如下：

let renderRow(squares) = <div>(squares |> Array.map(render))</div>;

此处squares的类型为array(int)。此函数不会编译并出现以下错误（错误指向上面div内部的代码）：

  This has type:
    array(React.element)
  But somewhere wanted:
    React.element

我的问题是，使<div/>或任何其他JSX组件具有任意数量的子代的正确方法是什么（不确定我的术语是否直接适用于此）。看起来数组不是路要走。可能吗如果不可能的话，ReasonReact（或者可能只是在React中）的惯用方式是什么来解决此问题？