1

背景：我正在阅读官方的 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是我的另一个组件。我想要实现的是将任意数量的Squares 添加到板的每一行中，并具有任意数量的行。

到目前为止我想出的方法不起作用，因为我不知道如何将数组或React.element子列表传递给<div />. 显示此问题的最小可能代码如下所示：

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

这里squares是 type array(int)。此函数无法编译并出现以下错误（错误指向div上面的代码）：

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

我的问题是，让任意数量的子代到一个<div/>或任何其他 JSX 组件的正确方法是什么（不确定我的术语是否直接在这里）。看起来数组不是要走的路。甚至可能吗？如果不可能，ReasonReact（或者，也许只是在 React 中）解决这个问题的惯用方式是什么？

4

1 回答 1

3

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

let renderRow(squares) = <div>(squares |> Array.map(render) |> React.array)</div>;
于 2020-07-28T19:47:31.827 回答