在ReasonReact中处理子对象

Question

我正在尝试构建自己的<MySelect>组件，用户可以在其中传入自己的<option>。如下所示：

<MySelect label="Pick a color" onChange={...}>
    <option value="blue">(ReasonReact.string("Blue"))</option>
    <option value="red">(ReasonReact.string("Red"))</option>
    <option value="green">(ReasonReact.string("Green"))</option>
</MySelect>

但是我不知道如何在MySelect中处理children。The docs (and here)没有显示完整的示例。

尝试

/* ... */
make = (~label, ~onChange, children) =>
    <label>
        <div>(ReasonReact.string(label))</div>
        <select onChange=onChange>
            ...children
        </select>
    </label>

我得到了

Error: function call with [@@bs.val "createElement"]  is a primitive with [@bs.splice], it expects its `bs.splice` argument to be a syntactic array in the call site and  all arguments to be supplied

没有排列(所以用children而不是...children)我得到

Did you pass an array as a ReasonReact DOM (lower-case) component's children?
If not, disregard this. If so, please use `ReasonReact.createDomElement`:
https://reasonml.github.io/reason-react/docs/en/children.html

Here's the original error message
This has type:
  array('a)
But somewhere wanted:
  ReasonReact.reactElement

我确信这两个错误消息和文档一起告诉了我需要知道的一切；只是有太多未知的单词让我无法理解。

我也尝试在谷歌上搜索例子(这似乎是一个相当正常的用例)，但我发现无论在哪里，他们都完全忽略了孩子们。

Answer 1

select是一个DOM (小写)组件，所以您需要使用createDomElement。文档中的相关部分在这里：https://reasonml.github.io/reason-react/docs/en/children.html#pitfall。用一个例子稍微修改一下你的例子：

module MySelect = {
  let component = ReasonReact.statelessComponent("MySelect");

  let make = (~label, ~onChange, children) => {
    ...component,
    render: _ =>
      <label>
        <div> (ReasonReact.string(label)) </div>
        (
          ReasonReact.createDomElement(
            "select",
            ~props={"onChange": onChange},
            children,
          )
        )
      </label>,
  };
};

module Example = {
  let component = ReasonReact.statelessComponent("Example");

  let make = _children => {
    ...component,
    render: _ =>
      <MySelect label="test" onChange=(value => Js.log(value))>
        <option value="blue"> (ReasonReact.string("Blue")) </option>
        <option value="red"> (ReasonReact.string("Red")) </option>
        <option value="green"> (ReasonReact.string("Green")) </option>
      </MySelect>,
  };
};