可变数量 children

Question

背景：我正在阅读官方 React 教程 (https://reactjs.org/tutorial/tutorial.html)，但使用的是 ReasonML（ReasonReact v. 0.9.1）。这是一个 tic-tac-toe 游戏。经典游戏是在 3x3 棋盘上玩的，我已经开始工作了，但现在我正试图将它扩展到任意方形棋盘尺寸。 hard-coded 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 是我的另一个组成部分。我想要实现的是在板的每一行中添加任意数量的 Squares，并具有任意数量的行。

到目前为止我想出的方法没有用，因为我不知道如何将数组或 React.element 的列表作为 children 传递给 <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

我的问题是，将任意数量的 children 分配给 <div/> 或任何其他 JSX 组件的正确方法是什么（不确定我的术语在这里是否正确）。看起来数组不是要走的路。有可能吗？如果不可能，那么 ReasonReact（或者，也许只是 React）中解决这个问题的惯用方法是什么？

Answer 1

有一个函数 React.array，您需要使用它来将元素数组转换为单个元素：

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

可变数量 children

Variable number of children

reason

reason-react