0

我正在尝试构建自己的<MySelect>组件，用户在其中传递自己的<option>s。像这样：

<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>

但我不明白如何children处理MySelect. 文档（和此处）没有显示完整的示例。

试图

/* ... */
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

我确信这些错误消息和文档都告诉了我我需要知道的一切；对我来说，有太多未知的词来理解它。

我也尝试用谷歌搜索示例（这似乎是一个相当正常的用例），但在我发现的任何地方，他们都完全忽略了孩子们。

4

1 回答 1

0

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>,
  };
};
于 2018-07-25T04:01:21.223 回答