问题标签 [reason-react]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
112 浏览

reason - 打印长度未知的列表

我有一个list(string)长度未知的,我想在我的 ReasonReact 组件中呈现。我读过没有对打印复杂数据结构的内置支持。但是,如何在不使用 Javascript 的情况下以纯函数方式在其组件中呈现列表呢?我找到了一个使用递归模式匹配来实现这一点的片段。我认为必须有一种更简单的方法,因为这似乎是一个相当常用的操作。

我想要实现的 Javascript 等价物是Array.toString().

0 投票
1 回答
383 浏览

reactjs - 如何使用原因反应有条件地在 JSX 中设置 HTML 属性?

我想呈现一个 HTML 复选框,其选中状态由数据控制。

给一个接收item类型的无状态组件{ label: string, checked: bool}

像这样:

如何根据条件将属性的存在添加checkedinput标签中item.checked == true

0 投票
1 回答
418 浏览

reactjs - 无法从 ReasonReact 中的事件侦听器获取事件数据

我正在尝试在表格上实现动态列大小调整(例如在 Excel 或 Google 表格中)。

在我的渲染函数中,handle当用户在我的调整大小控件上单击鼠标时,我使用回调:

在处理程序中,我想为 mousemove 添加一个新的事件侦听器,以便当用户“拖动”时,我们可以绘制一些东西来指示新列边缘的结束位置。

在 mousemove 处理程序中,我想我可以发送一个包含鼠标 clientX 坐标的 reducer 操作来更新组件状态,以便渲染函数可以在拖动时绘制一些东西。

当我尝试使用ReactEvent.Mouse.clientX(evt)获取 clientX 的特定 int 值时,我收到此错误:

我对类型系统的理解在这里有限,我不确定如何将鼠标clientX坐标的值转换为变量。

0 投票
1 回答
87 浏览

reason - 如何在 ReasonReact 中共享道具?

概括

假设我有一个reducerComponent

使用statelessComponent

todo是一个名为todoItem.

但是,我不能共享todoItem类型。

  • 如果我定义类型TodoList.re TodoItem会抱怨。
  • 如果我定义类型TodoItem.re TodoList会抱怨。

来源

这是我的TodoList.re

TodoItem.re

错误信息

0 投票
1 回答
81 浏览

compiler-errors - 在简单组件中键入变量

假设我有这个简单的组件

(在这里试试)

为什么我越来越

The type of this module contains type variables that cannot be generalized

? (类型变量在这里没用,但想象一下它在 initialState 中是需要的。试图使示例尽可能简单。)

0 投票
1 回答
115 浏览

reason - 在 ReasonReact 中解构鼠标移动事件

目前正在尝试clientX在 Reason React 中触发鼠标移动事件。这是当前的组件:

我假设我需要更改的代码在我的减速器的MouseMove操作中,mouseX需要更新,clientX但我似乎无法在不引发错误的情况下将其从事件对象中拉出。

任何建议都会很棒,我也不知道使用这些合成事件是否是在 ReasonReact 中跟踪鼠标位置的正确方法。

0 投票
1 回答
46 浏览

reason - ReasonReact 减速器中的动作类型错误

我正在尝试创建一个简单的待办事项应用程序,这是一个输入组件,我需要一个减速器来更新输入的状态。此代码引发错误 -This pattern matches values of type action but a pattern was expected which matches values of type unit => string

出于某种原因,它期望action如此unit => string,我不知道为什么。任何人都可以帮忙吗?

0 投票
2 回答
323 浏览

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

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

索引.re

应用程序

我的组件

就像现在的代码一样myHandler,每个组件使用时都需要参数,否则我们会收到错误:

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

但是,这会产生编译错误:

我想也许编译器可能需要一个提示。因此,我尝试将该类型显式添加到函数声明中,如下所示:

但随后错误转向我并给了我:

现在我很困惑。

0 投票
0 回答
82 浏览

reactjs - 通过混合反应生命周期事件在三种状态之间转换

我有一个带有三种淡入淡出状态的 ReasonReact 覆盖组件。第一个在完全不透明时可见,第二个在几乎完全透明时可见,第三个是不显示。

isOpen有没有办法使用生命周期事件来避免轮询以查看是否已切换外部道具?

我已经尝试从 didReceiveProps 和 render 发送更新(但在这两种方法中都出现了无限循环或主要闪烁)。

我当前的组件。

0 投票
1 回答
400 浏览

javascript - 如何在 ReasonML 绑定中包含来自相邻文件的无类型 JavaScript?

在尝试开始使用 Reason 时,在一个 JavaScript 项目中,我有一个非常轻量级的文件,它试图成为现有重型库的 Reason 类型接口:

但是,当我尝试在 ReasonReact 项目(已添加到)中使用该库时,@org/the-librarybsconfig.json bs-dependencies

相对于该 React 组件,我收到有关../未找到的错误:

我也尝试过,而不是../inTheLibrary.reexternal声明:

  1. @bs.module "./index.js"(相关包的无类型 JavaScript 端的直接 ES6 入口点,)
  2. @bs.module "@org/the-library",所述库的全名(即使我该库中输入???)

请帮忙!我希望能够进一步采用 ML,但我最难理解 ReasonReact 的依赖解析!


附加上下文:

因此,我们正在尝试构建我们的第一个 ReasonReact 项目,并且我们已经成功地将 baby's-first-opaque-types 添加到我们的一个内部库中,并将其包含在ReasonReact 页面中,如下所示 -由方法:

这会产生,当我们Imports.(addEngine("Game", gameEngine)),我们需要的全局设置行TheLibrary.addEngine("Game", GameEngine):我正处于尝试将输入信息上游到父项目的第一阶段,并将该代码发布到 npm,以便所有消费项目都可以开始使用 Reason。