5

我对 ReasonML 很陌生。我能够使用 ReasonReact 成功创建无状态组件，但我还没有弄清楚如何向组件添加自定义方法（例如Next.js' staticgetInitialProps）。

尝试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
4

2 回答 2

5

在 Discord 中回答，在此转发：

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

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

与此同时，您可能只需将该组件包装在一个薄层 js 组件中，该组件定义getInitialProps

因此，您将拥有一个具有 的 reactjs 组件，getInitialProps该组件呈现一个 ReasonReact 组件，该组件通过互操作公开底层类。如果我对您的理解正确，那么如果您使用的是来自 Reason 的包装器，那么您还会将 ReasonReact 绑定写入该 js 包装器。这使得这个过程有点做作，但你在这里遇到了一个病态的案例。

一方面：理想情况下，Next.js API 会要求一个组件类，getInitialProps另一方面，一个完全不可知的函数，它不附加到组件类上。这将大大简化 Reason 端的绑定过程。

于 2017-11-27T02:01:31.603 回答
1

我想在我的原因反应 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} />中的内容作为参数传递给您的原因反应页面。

于 2018-11-15T22:52:21.770 回答