标签: reason-react

我是ReasonML的新手.我能够使用ReasonReact成功创建无状态组件,但我还没弄清楚如何向组件添加自定义方法(例如Next.js的静态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 …

创建 reducerComponent 时出现错误：

代码

type state = {repoData: RepoData.repo};

let dummyRepo: RepoData.repo = {
  stargazers_count: 27,
  full_name: "jsdf/reason-react-hacker-news",
  html_url: "https://github.com/jsdf/reason-react-hacker-news"
};

let component = ReasonReact.reducerComponent("Page1");

let make = (_children) => {
  ...component,
  initialState: () => {
    repoData: dummyRepo
  },
  render: (self) => {
    <div className="App">
      <h1>{ReasonReact.stringToElement("Reason Projects")}</h1>
      <RepoItem repo={self.state.repoData} />
    </div>
  }
};

错误：

Failed to compile.

./src/index.re
Module build failed: Error: We've found a bug for you!
  /Users/me/personal/test/reason-app-shell-starter-kit/src/page1.re 9:17-53

   7 ? };
   8 ?
   9 ? let component = …

刚刚开始学习理性反应，并在尝试读取 ENUM 值的 graphql 设置中挣扎。

设置

• 理性反应
• 阿波罗graphql
• graphql_ppx
• github graphql 端点

我正在通过 github api 获取最新的拉取请求数据，并读取status在 gql 文档中定义为枚举的属性：

• 打开
• 关闭
• 合并

检查网络选项卡，我看到状态是作为字符串接收的。在应用程序中，当我记录该字段时，我会得到一堆反映这些值的整数。smb 可以解释一下，我如何将数据作为字符串“打印”到我的视图中，以及为什么将它们转换为整数？是否有某种生成的类型可以用于变体开关？

let stateEnum = data->map(node => node##state);
Js.log(stateEnum) // possible values: 880069578, 982149804 or -1059826260
// somehow switch these values here?! :)
// current type of `stateEnum` is option('a)

非常感谢，祝你有美好的一天！

我是理性反应的新手.我正在尝试将版权符号放在react-reason组件中.我试过了

<span >(ReasonReact.stringToElement("&copy;"))</span>

但这并没有给我©符号.

在ReasonML中，侦听/处理全局DOM事件的最惯用的方式是什么。

我正在构建2048游戏的ReasonReact版本，需要监听键盘事件。

在一个标准的JS /应用程序做出反应我有一个组件componentDidMount的生命周期方法，我会听与事件document.addEventListener("keypress", [my_event_handler])和UNLISTEN相同的上componentWillUnmount用document.removeEventListener("keypress", [my_event_handler])。

在Reason / ReasonReact中访问文档的最惯用的方式是什么。（addEventListener / removeEventListener）？

假设我有一个高阶组件，类似于下面的琐碎定义，是从JavaScript模块导出的./hoc.js：

export const withStrong =
  Component => props =>
    <strong> <Component ...props/> </strong>

假设我有一个名为的组件HelloMessage，那么这段JavaScript是等效的：

import { withStrong } from './hoc.js';

const HelloMessage = ...

const StrongMessage = withStrong(HelloMessage);

ReactDOM.render(
  <StrongMessage name="Joe" />,
  document.getElementById('react-app')
);

我试图了解两者之间的区别：

 React.useEffect(() => {
    let timerId = Js.Global.setInterval(() => tick(), 1000);
    Some(() => Js.Global.clearInterval(timerId));
  });
 React.useEffect0(() => {
    let timerId = Js.Global.setInterval(() => tick(), 1000);
    Some(() => Js.Global.clearInterval(timerId));
  });

它们都具有相同的类型签名并且都编译但useEffect0什么都不做：

// useEffect0 : unit => option(unit => unit) => unit
// useEffect : unit => option(unit => unit) => unit

要使用https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks 上的示例，它使用useEffect但如果您更改它使用useState而不是useReducer您必须更改useEffect为useEffect0

原始版本使用useEffect0：

type action =
  | Tick;

type state = {
  count: int,
}; …

有没有一种简单的方法可以使用ReasonReact插入表情符号？

在ReactJS中，您可以简单地输入表情符号并按预期方式呈现，但是在Reason中似乎并非如此。

如果您尝试这样做：

<span role="img" ariaHidden=true> {React.string("")} </span>

它编译为：

React.createElement("span", {
                  "aria-hidden": true,
                  role: "img"
                }, "\xf0\x9f\x92\xa9")

呈现为：

ð©

编码表情符号的最佳方法是什么，以便ReasonReact可以按预期显示它们？

这个问题的答案说明了如何插入unicode，但是我对如何直接键入字符而无需查找每个unicode感兴趣。

在我的代码中开始出现的很多东西是：

<Parent>
  {if (condition) {
     <Child />;
   } else {
     <div />;
   }}
  <Sibling />
</Parent>;

基本上，我只希望在Child条件为true时渲染，否则不渲染任何东西。

将divelse 置于else条件中感觉不对，因为这会使a div确实不应该存在。如果条件为假，如何有条件地渲染组件而不必渲染不必要的元素？

 let numbers = [1, 5, 6, 12, 52, 25];                                                                
 let state: list((int, bool)) =  numbers |> List.map(n => (n, false));                                                         
 state |> List.map((n, b) => <NumberCard number=n picked=b onClick />);

可能做错了什么，因为类型检查器说：

 51 ?
  52 ? let elems =
  53 ?   state |> List.map((n, b) => <NumberCard number=n picked=b onClick />
       );
  54 ?
  55 ? <div className="flex flex-column">

  This has type:
    list(int) => list(bool => React.element)
  But somewhere wanted:
    list((int, bool)) => 'a

  The incompatible parts:
    int
    vs
    (int, bool)