Имя поля несвязанной записи в компоненте Reason

Заимствовав почти весь полезный ответ Явара, я получил следующее:

$cat src/index.re 
let products = [|
  {name: "Football", price: 49.99},
  {name: "Basebll", price: 1.99},
  {name: "Poker", price: 33.99}
|];

ReactDOMRe.renderToElementWithId(
    <ProductTable products />
);

$cat src/productRow.re
let component = ReasonReact.statelessComponent("ProductRow");

let echo = ReasonReact.stringToElement;

let make = (~name: string, ~price: float, _) => {
 ...component,
 render: (_) => {
    <tr>
     <td>{echo(name)}</td>
     <td>{price |> string_of_float |> echo}</td>
    </tr>
 }
};
$cat src/ProductTable.re
let component = ReasonReact.statelessComponent("ProductTable");

let echo = ReasonReact.stringToElement;

let make = (~products, _) => {
    ...component,
    render: (_) => {
      let productRows = products
        |> Array.map(({name, price}) => <ProductRow key=name name price />)
        |> ReasonReact.arrayToElement;

      <table>
        <thead>
          <tr>
            <th>{echo("Name")}</th>
            <th>{echo("Price")}</th>
          </tr>
        </thead>
        <tbody>productRows</tbody>
      </table>
    }
}

Я получаю следующую ошибку времени компиляции:

   7 ┆ render: (_) => {
   8 ┆   let productRows = products
   9 ┆     |> Array.map(({name, price}) => <ProductRow key=name name price />
       )
  10 ┆     |> ReasonReact.arrayToElement;
  11 ┆ 

  Unbound record field name

Как я могу исправить эту ошибку времени компиляции?


reason reason-react
person Kevin Meredith    schedule 14.02.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Компилятор Reason определит для вас множество типов, но для записей вы должны заранее объявить, какие поля у него есть (и их типы).

Получив полезный ответ @ yawar, вам просто нужно включить определение типа в верхней части файла:

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

При этом компилятор сможет определить, что products относится к типу array(product), и с этого момента он должен продолжить работу. Дайте ему попробовать здесь

person sgrove    schedule 14.02.2018