gpt4 book ai didi

reactjs - 如何向 ReasonReact 组件添加自定义方法?

转载 作者:行者123 更新时间:2023-12-03 13:35:31 30 4
gpt4 key购买 nike

我对 ReasonML 非常陌生。我能够使用 ReasonReact 成功创建无状态组件,但我还没有弄清楚如何向组件添加自定义方法(例如 Next.js' static getInitialProps )。

当尝试在组件上定义 getInitialProps 方法时,我收到 The field getInitialProps does not属于 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

最佳答案

在 Discord 中回答,在此处转发:

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

此外,我相信您不能直接将 ReasonReact 组件传递到下一个方法中。它可能需要一个 react 组件类。请参阅interop section关于如何为 js 端公开底层 js 类。

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

的一层薄薄的 js 组件中

因此,您将拥有一个具有 getInitialProps 的 ReactJS 组件,该组件呈现一个通过互操作公开底层类的 ReasonReact 组件。如果我理解正确的话,如果您使用 Reason 中的包装器,您还可以将 ReasonReact 绑定(bind)写入该 js 包装器。这使得这个过程有点做作,但你在这里遇到了一个病态的情况。

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

关于reactjs - 如何向 ReasonReact 组件添加自定义方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47502631/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com