问题标签 [recompose]

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 回答
862 浏览

reactjs - 使用重组,如何用常规道具覆盖状态中的映射道具?

构建简单的电话输入表单组件:

当用户在字段中键入电话时,此功能会更新errorText道具:

使用此代码增强了组件,您可以看到errorTextprop 也来自 redux 状态:

当用户单击按钮并且网络请求失败时,我从减速器收到错误,然后将其映射到组件作为errorText道具。但是当用户再次编辑手机时,应该会出现“请输入有效号码”错误,但来自 redux 的道具仍然存在,我changePhoneInput没有更新道具。如何避免这种情况?

我试图在 compose 中更改函数的位置,但没有帮助。我基本上需要的是用函数覆盖errorText组件中的 prop 。changePhoneInput当然我可以使用另一个变量名,但我认为应该有另一种方法来解决这个问题。

0 投票
3 回答
647 浏览

javascript - 是否可以重命名 Recompose HOC(以获得更好的堆栈跟踪)?

我喜欢recompose,但是当我使用它时,我会看到堆栈跟踪,其中包含以下行:

有什么方法可以为各个 HOC 组件提供某种“显示名称”以获得更具可读性的堆栈跟踪?

0 投票
3 回答
1048 浏览

reactjs - this.forceUpdate() 中的 recompose withHandler

我想this.forceUpdate()在我的撰写的 withHandlers 中使用名为“更新”的处理程序之一。我正在使用 recompose 来实现相同的目的。在下面找到示例代码:

但它不起作用。有谁知道如何在recompose库的withHandlers中使用forceUpdate()react 方法?

有没有其他方法可以达到与 相同的结果forceUpdate()

0 投票
0 回答
199 浏览

reactjs - 尝试使用 curry 函数创建 HOC,但还需要接受 GraphQL 数据道具(react、apollo、GraphQL、recompose)

我正在使用 React、recompose 和 apollo GraphQL

我正在尝试创建 UI 授权(后端身份验证也将在那里)以允许具有特定角色的用户输入只有他们授权进入的页面。我要写一篇我觉得有帮助的文章。

在文章中,他使用了静态道具。我需要从我与我的授权组件在 index.js 文件中组成的数据查询中传递道具。

目前我的代码如下所示:

在另一个文件中,我创建了包含允许访问页面的角色的变量,与上面引用的文章相同:

然后我将这个文件和我的 Auth 导入到我定义我的路由的文件中。我和作者在文章中所做的一样,并根据允许查看页面的人来定义将包装路由组件的角色:

这是我被抛出错误的地方

认为它正在尝试在我传递的用户角色数组上找到一个 graphql 道具,而不是在授权上。

0 投票
1 回答
432 浏览

reactjs - 重构一组反应元素的传递道具

我开始使用 recompose 库,效果很好。但是我在传递反应元素的默认道具时遇到了一些问题。

流错误:不能在数组类型上调用 mapOptions 函数

0 投票
1 回答
1103 浏览

javascript - componentWillReceiveProps 生命周期内的 setState 重构 HOC

每次收到即将到来的新道具时,我都想更改本地状态。为此,我使用库中的lifecycleHOC Recompose。但这并不像我想的那么简单。我要么永远设置该值,要么在使用回调时发生堆栈溢出。

0 投票
1 回答
713 浏览

reactjs - 用酶测试重组 - 访问道具问题

所以我一直在寻找答案,但还没有找到适合我用例的答案。我对使用 Jest/Enzyme 进行测试有点陌生,对使用 recompose 进行测试也很陌生。

我不知道如何测试我的功能组件,它是使用 recompose 创建的。我似乎无法弄清楚如何在我的测试中访问道具(状态和处理程序函数)。

这是我的功能组件的示例,我将调用UserDetails

这是我的index.js文件的示例代码,它将我的 withState 和 withHandlers 组合到我的组件中:

现在我正在尝试为这个组件编写测试。我导入包含组件的索引文件以创建 HOC。

控制台日志在终端中给了我这个

如果我 console.log ,我会得到相同的输出tree.props('userInfo')。如果我 console.logtree.prop('userInfo')tree.props().userInfo

此外,当我尝试在测试文件中使用我的处理程序时,我收到一个方法未定义的错误。

我哪里错了?谢谢!

0 投票
1 回答
547 浏览

javascript - 如何在 recompose 中使用 setTimeout 更新状态?

我想学习 recompose,所以我从一个简单的组件组件开始:

我想以某种方式seconds使用 recompose 传递给它,它会每秒递增。

如何正确增加seconds道具,以便在道具更改时将其传播到组件?我尝试使用setTimeoutafterlet seconds声明添加递归函数,但它不会在更改时向下传播到组件。

我结束了这个

0 投票
1 回答
4539 浏览

reactjs - 如何用酶、笑话、重组、反应测试组件中的功能

好的,所以我对如何使用酶/玩笑测试我的组件的功能有点困惑。仍在学习如何测试我的组件 - 我可以编写简单的测试,但现在我需要让它们更复杂。

我想知道测试我的组件的函数是否被正确调用以及它们是否按预期更新状态道具的最佳方法。我发现很棘手的是我的函数和状态都存在于我的组件的道具中。

如果我需要使用间谍,我希望最好知道如何使用 Jest,但是如果像 Sinon 或 Jasmine 这样的部门更适合我愿意接受的工作(请告诉我为什么这样我可以更好地理解)。

例如,我有一个UserDetails组件

TextInput包括:

这是我的index.js文件的示例代码,它将我的 withState 和 withHandlers 组合到我的组件中:

到目前为止,我的测试文件如下所示:

控制台日志向我返回了关于我在调用它们时期望看到的正确信息:

现在的问题是我如何使用它们,以及最好的方法。我什至使用我的函数还是只是检查是否调用了 onChange?

更新(有点)

我已经尝试过了,我得到以下信息:

在我的终端中,我得到:

但是,如果我尝试使用 Jest 创建一个 spyOn,则会收到一个错误,即它无法读取“未定义”的函数。

我试过了spy = jest.spyOn(UserDetails.prototypes, 'onUpdateUserInfo')spy = jest.spyOn(BareUserDetails.prototypes, 'onUpdateUserInfo')他们都抛出了错误。

0 投票
1 回答
406 浏览

javascript - 使用自己的属性增强组件的类型 HOC?

我正在尝试使用 Recompose 及其 HOC 类型,使用 Flow 键入一个高阶组件 (HOC)。

这是我的代码:

现在这失败了:

试图阅读文档和一些我无法找到解决方案的博客文章。我发现的所有示例都非常琐碎,没有一个涵盖这个简单的案例。

输入此代码的正确方法是什么?