问题标签 [higher-order-components]

我正在开发一个简单的 hoc 组件，它将视口尺寸传递给它的孩子。在窗口调整大小时，我启动 handleResize 方法将新窗口尺寸传递给子组件。我想使用 lodash 中的 debounce func 来最小化调用 handleResize 方法的次数（ref）。

它按预期工作，但我不断收到以下警告：

有谁知道发生了什么？

请告诉我

我想从我的 HOC 访问输入元素。我怎样才能做到这一点？

我已经尝试了一些东西，但这是最新的尝试。在 withInputMask 渲染方法中，我插入了以下内容。

当我打开反应开发工具并单击 withInputMask 组件时，这就是我所看到的。

我有一个像这样的组件：

还有一个像这样的高阶组件：

我用过它们：

非常好，它输出了我想要的

但是，如果我希望 PersonList 组件呈现从其父级传递的内容而不是导入的内容，如下所示：

现在，

引发错误。

我知道我可以像这样修复 HOC

但这是一个重大变化，我不想这样做。

无论如何我可以在不破坏我的 HOC 的情况下归档我的目标（HOC 组件呈现传递而不是导入的东西）？

或者有什么解决办法？

下面是高阶组件。HOC 专门连接到 redux 以访问动作创建者之一：importantReduxAction.

这是将使用 HOC 组件的包装组件。它还将自己连接到 redux 以获得对不同方法的访问权限：otherReduxAction.

问题发生mapDispatchToProps在我的 HOC 内部被孩子覆盖，并且动作创建者：importantReduxAction，永远不会被传递到我的 HOC 中。它收到以下错误：

方法未定义

我已经通过将方法传递给我的子组件来解决这个问题，如下所示：

但这个解决方案并不是我真正想要的工作方式。有没有办法让我的 HOC 合并到它想要与包装组件的动作创建者一起使用的动作创建者中？还是我必须找到解决这个问题的新方法？

TLDR：使用动作创建者的 HOC 组件包装了也有一个的子组件。HOC 动作创建者被踢到遏制并且从未通过。

JSFiddle：https ://jsfiddle.net/40vpaLj5/

我用谷歌搜索了一些问题，我发现唯一消失的相关问题是人们在模式上使用它时，他们谈到设置 z-index 来修复它。反正我试了还是一无所获。我怎样才能解决这个问题？

有没有一种方法可以通过 React 高阶组件将上下文传递给它包装的组件？

我有一个 HOC，它从其父级接收上下文并利用该上下文执行基本的通用操作，然后包装一个子组件，该子组件也需要访问相同的上下文以执行操作。例子：

特设：

包装组件：

传递{...this.context}HOC 不起作用。只要被包裹的组件被 HOC 包裹，它this.context就是空的。{}请帮忙？有什么方法可以传递不涉及将其作为道具传递的上下文？

我正在使用 React-Router 4 创建一些路由。（它使用官方文档PrivateRoute中的组件，但这与这个问题无关。）

如您所见，HomeandClients组件被包装在一个HOC中。目前这什么也没做：

这工作正常。我不知道如何将Login路线包装在同一个 HOC 中。我试过了

但这会返回错误：

Route.render()：必须返回一个有效的 React 元素（或 null）。

通过大量研究，我知道国际化/本地化是 React上下文功能的少数合法用例之一。但是我的问题是关于是否真的需要使用上下文。将要国际化的组件包装在提供本地化字符串作为道具的高阶组件中不是同样有效吗？例如，对于支持英语和西班牙语的应用程序：

使用本地化 JSON，例如：

以及如何在组件中使用它的一个非常基本的示例：

我能想到的主要问题是将潜在的大型 JSON 注入需要其中一个字符串的每个组件的开销。是否有其他原因不首选此解决方案？

给定一个标准的 compose 函数和一个 'div' 组件，你将如何编写这两个 HOC：

• 'div' 元素以 20px 的绿色框开始，然后单击时变为 50px 的蓝色框。
• -a：将 state 与 props 合并，b：触发 state 更改，由单独的 HOC 处理。
• updater HOC 将状态映射到 props，并设置默认状态
• 调度程序 HOC 接受一个函数以在单击时获取新状态

下面的示例用于获取绿色框，并正确触发处理程序。更新仅在 Dispatcher HOC 的状态下发生。updater HOC 的状态保持不变，它的 props 也是如此。

我真的很想知道发生了什么。在 compose 中翻转两个 HOC 的顺序会导致无法设置处理程序。由于他们都合并{...this.props}，这对我来说没有意义。猜测我不明白多个 HOC 如何合并道具和状态。

有人可以解释一下 React 中的高阶组件吗？我已经阅读并重新阅读了文档，但似乎无法更好地理解。根据文档，HOC 通过创建一个返回反应组件的主函数，通过向该函数传递参数来帮助消除重复。我对此有几个问题。

• 如果 HOC 创建一个新的增强组件，是否可以根本不传入任何组件作为参数？
• 在诸如this的示例中，它是高阶组件，theButton或EnhancedButton.

• 我尝试像这样创建一个 HOC：

  /li>

运行它不会显示 HOC，只会显示div

任何人都可以提供比给出的更好的例子吗？