代码之家 › 专栏 › 技术社区 › Homan

如何通过可选的带标签的参数将onClick处理程序从父组件传递到子组件

reason-react optional-arguments reason

0

Homan · 技术社区 · 7 年前

我希望将事件处理程序从父级传递到子级,并将一系列组件向下传递。以下是一个工作示例:

索引

ReactDOMRe.renderToElementWithId(
  <App myHandler={_evt => Js.log("my handler clicked")} />,
  "root",
);

App.re

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (~myHandler, _children) => {
  ...component,
  render: _self => <MyComponent myHandler />,
};

MyComponent.re

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (~myHandler, _children) => {
  ...component,
  render: _self =>
    <div onClick=myHandler> {ReasonReact.string("click me")} </div>,
}

正如现在的代码一样 myHandler

This call is missing an argument of type (~myHandler: ReactEvent.Mouse.t => unit)

通过添加 =? 在函数声明中,如下所示:

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (~myHandler=?, _children) => {
  ...component,
  render: _self =>
    <div onClick=myHandler> {ReasonReact.string("click me")} </div>,
};

但是,这会产生编译错误:

  5 â   ...component,
  6 â   render: _self =>
  7 â     <div onClick=myHandler> {ReasonReact.string("click me")} </div>,
  8 â };

  This has type:
    option('a)
  But somewhere wanted:
    ReactEvent.Mouse.t => unit

我想也许编译器需要一个提示。然后我尝试将该类型显式添加到函数声明中,如下所示:

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (~myHandler: ReactEvent.Mouse.t => unit=?, _children) => {
  ...component,
  render: _self =>
    <div onClick=myHandler> {ReasonReact.string("click me")} </div>,
};

但我突然意识到这个错误,并告诉我:

  4 â let make = (~myHandler: ReactEvent.Mouse.t => unit=?, _children) => {
  5 â   ...component,
  6 â   render: _self =>

  This pattern matches values of type
    ReactEvent.Mouse.t => unit
  but a pattern was expected which matches values of type
    option('a)

现在我都糊涂了。

2 回复 | 直到 7 年前

1

2

glennsl Namudon'tdie 7 年前

只是为了提供一个恰当的答案,因为这似乎不太可能作为一个复制品关闭

可选参数被转换为 option 这是被叫方的事。否则,你将如何表示论点的缺失。记住,没有空值,所以空值性必须显式表示。

myHandler option(ReactEvent.Mouse.t => unit) . onClick 当然,也是一个可选参数,它将转换为 ,但由于这通常是自动完成的,我们不能只给它一个直接地

幸运的是,有人已经想到了这个场景,并添加了一个语法结构以便能够传递 s显式地作为可选参数。只需添加一个 ? 在表达式传递到参数之前,您应该很好:

<div onClick=?myHandler> {ReasonReact.string("click me")} </div>,

2

1

Nimish Gupta 7 年前

因此,要使可选参数起作用,您必须在 MyComponent 组成部分

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (~myHandler=?, _children) => {
   ...component,
   render: _self => {
      let myHandler = switch myHandler {
        | None => (_e) => Js.log("default");
        | Some(handler) => handler;
   };
   <div onClick=myHandler> {ReasonReact.string("click me")} </div>
}