问题标签 [higher-order-components]

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

reactjs - 在 Typescript 中使用高阶组件

我正在尝试将 react-i18next 与 Typescript 一起使用,但遇到了一些问题。

这是我期待的道具的界面。

然后我有一个导航组件,由我编写。

现在我只想渲染这个我已经组成的组件

但是,在这个时刻,TS 失败了,我收到以下错误

有人可以解释我做错了什么。

0 投票
1 回答
1365 浏览

reactjs - 如何使用 withRouter HOC 和 withFormik 从 react-router-dom 传递历史道具?

我正在使用Formik在 React 中验证表单。我想知道如何将历史道具从withRouter HOC 传递到withFormik HOC?

通过运行上面的代码,我收到以下错误:

警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查 Formik 组件的代码。

0 投票
0 回答
1039 浏览

javascript - 如何在 HOC 执行 componentDidMount 之前更新 React HOC?

我有一个包装在 HOC 中的 React 组件。HOC 会在其中建立一个订阅,该订阅componentDidMount会导致 HOC 在调用 HOC 的setState函数时重新呈现,从而重新呈现包装的组件。这类似于 Redux Connect 的工作方式。

我遇到的问题是包装组件(子组件)负责提供 HOC 的数据,这些数据需要建立订阅。它来自传递给孩子的道具。

我可以从控制台看到,componentDidMount直到执行包装的(子)组件才从 HOC 调用componentDidMount

创建一个处理程序方法允许被包装的组件使用更新 HOC 的类属性是否可以接受this.data = data

这将允许 HOC 使用来自包装组件的数据来设置订阅。

HOC

孩子

在上面,props.handleData也可以从componentDidMount孩子的内部调用。

0 投票
1 回答
180 浏览

reactjs - 高阶组件接受数组?

我是反应和 hocs 模式的新手。我想做的是用<hr/>标签连接组件,以便每个组件用一条线分隔。所以我有:

我想知道这withSeparator是否是 HOC,因为它不接受组件,但它接受组件数组。我想知道我应该把这个withSeparator函数放在哪里,用普通的实用程序函数或其他 hocs 文件夹。

当我使用它时,它有点凌乱并破坏了我的项目风格。

0 投票
1 回答
299 浏览

react-native - 使用高阶组件时,带状态的热重载停止工作

有没有其他人遇到过这个问题?我正在开发一个 react native 应用程序,并且使用 react native 调试器和 redux devtools 可以很好地使用状态热重新加载,但是一旦我在更高阶组件中进行更改或对使用更高阶组件的组件进行更改,我的redux 状态从 devtools 中消失,一切都需要硬刷新。当我在没有更高阶组件的情况下更改文件时,一切都按预期工作。

0 投票
1 回答
214 浏览

reactjs - 这是否被认为是来自高阶组件的突变?

我正在阅读关于不要改变原始组件的部分。使用此链接中的组合。

https://reactjs.org/docs/higher-order-components.html

然后我回顾了一个我正在尝试构建的项目。在高层次上,这就是我的代码的样子:

我的问题是:

  1. 在我的Wrapper.componentWillAppear()中,我触发了对象方法,例如this.wrappedComponent.prototype.<methodname>. 这些对象方法可以设置它自己的状态或在渲染函数中为 html 的内容设置动画。这是否考虑改变原始组件
  2. 如果问题 1 的答案是肯定的,那么也许我需要一种更好的设计模式/方法来完成我试图在我的代码中描述的内容。这基本上是我的大部分组件需要获取自己的数据(Home.fetchAllData(){then set the state()}),更新视图(Home.render()),运行一些通用动画函数(Wrapper.componentWillAppear(){this.animateFunctionOfSomeKind()}),然后运行特定于自身的动画(Home.animateContent())。所以也许用抽象方法继承更适合我想做的事情?
0 投票
0 回答
98 浏览

javascript - 给定一个重构生命周期 HOC,如何避免需要描述 PropTypes?

我已经创建了一个重构生命周期 HOC... 查看组件的代码以了解我如何将 HOC 与我的组件一起使用。

有没有办法避免需要为 HOC 包装描述 PropTypes:

零件:

HOC 重构生命周期

0 投票
1 回答
60 浏览

reactjs - HOC/渲染回调或库函数?

我正在做一个项目,需要向潜在客户发送一封关于他们感兴趣的房产的电子邮件。有一个顶级组件可以从数据库中获取房产信息和潜在客户的联系信息并传递给它的孩子。有两个组件共享相同的格式化信息过程,然后调用发送电子邮件的电子邮件函数。一个组件的示例如下所示:

另一个组件看起来像这样

所以我看到了一些共享功能,我不想在每个组件中重复这些功能。我还在学习(我的第一份工作),为什么不以此为契机来提高我的技能呢?所以我想在 HOC/Render 道具模式上做得更好,但我不确定这是否是使用它的地方。

我应该使用渲染道具创建一个组件(我宁愿使用这种模式而不是 HOC)?我什至不确定那会是什么样子,我已经阅读了博客并观看了会谈,唉

但是这种模式是否适用于我的情况,或者我最好定义一些 lib 函数来处理格式化电子邮件的有效负载,然后将该函数导入到需要它的各种组件中?

谢谢!

0 投票
1 回答
1401 浏览

reactjs - 将 props 传递给高阶组件

假设我们有以下 HOC:

我如何将道具传递ComposedComponentmyHoc外面myHoc

用例

我正在编写一个与redux-orm. 自然,我想用 HOC 实现从数据层抽象视图层(哑组件)的经典思想。由于模型有些统一,我使用工厂模式来创建这些 HOC。

工厂函数签名:

在我的应用程序中,我有一个可以“选择”这些文档的丰富编辑器。然后documentId将这些选定的文档存储在 redux 存储中。我很难用上面的工厂函数编写一个 HOC 来将选定的文档绑定到一个哑组件。

示例所需的函数签名:

我可以手动检索商店并获取选定的文档 ID,但这对我来说很难闻。

另一种解决方案是使用 HOC 将选定的文档 id 绑定到一个包装组件,然后该组件将使用该 id(来自它的 props)来创建另一个具有文档绑定 HOC 的 HOC。这可行,但需要大量样板代码才能传递 id。

0 投票
2 回答
971 浏览

reactjs - React - 获取包装类组件的引用

我有一个包含子侧边栏组件的地图组件。我正在尝试执行一项相对简单的任务,即在单击地图标记时滚动到侧边栏中的位置列表中的位置。但是,因为侧边栏需要包裹在withRouterand中connect,所以我无法(ref) => this.sidebar = ref在地图组件中设置 ref。

我知道 usingwrappedComponentRef可以让我获得 的内容withRouter,但是我仍然需要connect处理。

MapSidebar我还尝试在实例上创建自定义引用:

然后在MapSidebar类构造函数中,调用:

但这导致该组件更新的无限循环(尽管我不确定我理解为什么)。

有没有更好的方法来解决这些问题?