将 React 组件传递给另一个组件？

Question

我正在尝试从 Thinking in React 定义 ProductRow 和 ProductCategoryRow。

productRow.re

let component = ReasonReact.statelessComponent("ProductRow");

let make = (~name, ~price, _children) => {
  ...component,
  render: (_self) => {
    <tr>
      <td>{ReasonReact.stringToElement(name)}</td>
      <td>{ReasonReact.stringToElement(price)}</td>
    </tr>
  }
};

productCategoryRow.re

let component = ReasonReact.statelessComponent("ProductCategoryRow");

let make = (~title: string, ~productRows, _children) => {
  ...component,
  render: (_self) => {
    <div>
        <th>{ReasonReact.stringToElement(title)}</th>
    </div>
  }
};

我认为我需要 map 超过 productRows，即 List of ProductRow，函数为：productRow => <td>productRow</td>.

在这个例子中我该如何做？

或者，如果我完全偏离了目标，请解释我是如何实现上述目标的。

Answer 1

在'Thinking in React'页面中，组件嵌套层次结构是一个ProductTable包含多个ProductRow。我们可以通过映射产品数组并生成 ProductRows 作为输出来在 ReasonReact 中对其进行建模。例如：

type product = {name: string, price: float};

/* Purely for convenience */
let echo = ReasonReact.stringToElement;

module ProductRow = {
  let component = ReasonReact.statelessComponent("ProductRow");
  let make(~name, ~price, _) = {
    ...component,
    render: (_) => <tr>
      <td>{echo(name)}</td>
      <td>{price |> string_of_float |> echo}</td>
    </tr>
  };
};

module ProductTable = {
  let component = ReasonReact.statelessComponent("ProductTable");
  let make(~products, _) = {
    ...component,
    render: (_) => {
      let productRows = products
        /* Create a <ProductRow> from each input product in the array. */
        |> Array.map(({name, price}) => <ProductRow key=name name price />)
        /* Convert an array of elements into an element. */
        |> ReasonReact.arrayToElement;

      <table>
        <thead>
          <tr> <th>{echo("Name")}</th> <th>{echo("Price")}</th> </tr>
        </thead>
        /* JSX can happily accept an element created from an array */
        <tbody>productRows</tbody>
      </table>
    }
  };
};

/* The input products. */
let products = [|
  {name: "Football", price: 49.99},
  {name: "Baseball", price: 9.99},
  {name: "Basketball", price: 29.99}
|];

ReactDOMRe.renderToElementWithId(<ProductTable products />, "index");

将 React 组件传递给另一个组件？

Passing React Component to Another Component?

reason

reason-react