时间戳

首页 > 解决方案 > 如何通过可选的标记参数将 onClick 处理程序从父组件传递到子组件

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

问题描述

我想将事件处理程序从父级传递给子级的一系列组件。这是一个工作示例：

索引.re 

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

应用程序

let component = ReasonReact.statelessComponent(__MODULE__);

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

我的组件

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)

=?通过在函数声明中添加 a 可以使带标签的参数成为可选的，如下所示：

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)

现在我很困惑。

标签： reasonoptional-argumentsreason-react

解决方案

只是为了提供一个正确的答案，因为这似乎不太可能作为重复而关闭

可选参数option在被调用者方面转换为 s 。否则，您将如何表示没有论点。请记住，没有空值，因此必须明确表达可空性。

myHandler因此是一个option(ReactEvent.Mouse.t => unit). onClick当然也是一个可选参数，它会变成一个option，但是因为这通常是自动完成的，所以我们不能直接喂它option。

幸运的是，有人已经想到了这种情况并添加了一个语法结构，以便能够将options 作为可选参数显式传递。只需?在传递给参数的表达式之前添加一个，就可以了：

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

推荐阅读