Question

我是ReasonML的新手。我能够使用ReasonReact成功创建无状态组件，但我还没弄清楚如何向组件添加自定义方法（例如Next.js' static getInitialProps）。

尝试在组件上定义getInitialProps方法时，收到The field getInitialProps does not belong to type ReasonReact.componentSpec错误。

我应该如何在React组件上添加此定义此自定义方法？

组件

let str = ReasonReact.stringToElement;

let component = ReasonReact.statelessComponent("Index");

let make = (~items: Listings.items, _children) => {
  ...component,
  getInitialProps: () =>
    Js.Promise.(
      Endpoints.fetchListings()
      |> then_(Fetch.Response.json)
      |> then_((json) => Js.Json.decodeArray(json) |> resolve)
    ),
  render: (_self) =>
    <div>
      (List.length(items) > 0 ? <Listings items /> : <Loading />)
    </div>
};

let default =
  ReasonReact.wrapReasonForJs(
    ~component,
    (jsProps) => make(~items=jsProps##items, [||])
  );

错误

We've found a bug for you!
/Users/davidcalhoun/Sites/web/evergreen-roots/pages/Index.re 7:3-17

5 │ let make = (~items: Listings.items, _children) => {
6 │   ...component,
7 │   getInitialProps: () =>
8 │     Js.Promise.(
9 │       Endpoints.fetchListings()

This record expression is expected to have type
  ReasonReact.componentSpec ('a,  'b,  'c,  'd,  'e)
The field getInitialProps does not belong to type ReasonReact.componentSpec

Answer 1

在Discord中回答，重新发布在这里：

您无法在组件上定义任意方法。看到...component？这是用静态字段传播记录并像你一样更新一些字段，例如render。

另外，我相信你不能直接将ReasonReact组件传递给下一个方法。它可能要求反应组件类。请参阅interop section，了解如何为js端公开底层的js类。

与此同时，您可以将该组件包装在定义getInitialProps

的js组件的薄层中。

所以你有一个具有getInitialProps的reactjs组件，它呈现一个通过互操作公开底层类的ReasonReact组件。如果我正确理解你，如果你正在使用Reason的那个包装器，那么你也可以将ReasonReact绑定写入该js包装器。这使得这个过程有点人为，但你在这里遇到一个病态的案例。

作为一方：理想情况下，Next.js API会要求一个组件类，而getInitialProps就是一个完全不可知的函数，它没有附加到组件类上。这大大简化了Reason侧的绑定过程。

Answer 2

我想在我的原因相关的Next.js页面中获取上下文，并找到了解决方案。这是访问上下文以检测我们是否正在服务器上渲染并将布尔值传递给您的ReasonReact组件的示例：

let make = (~onServer, _children) => {
/* component code goes here */ 
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps => make(~onServer=jsProps##onServer, [||]));

let getInitialProps = context =>
  Js.Promise.make((~resolve, ~reject as _) => {
    let onServer =
      switch (Js.Nullable.toOption(context##req)) {
      | None => false
      | Some(_) => true
      };
    resolve(. {"onServer": onServer});
  });

let inject = [%bs.raw {| (cls, fn) => cls.getInitialProps = fn |}];

inject(default, getInitialProps);

〜https://github.com/zeit/next.js/issues/4202#issuecomment-439175214 所有归功于@tmepple和@ -rase，他们在那里发布了解决方案！

另一种解决方案是将“ _app.js”保留为纯js，并将内容从该getInitialProps传递到<Component someParam=manualStuff {...pageProps} />，后者可以作为参数输入到您的原因反应页面中。

如何向ReasonReact组件添加自定义方法？

组件

错误

2 个答案: