问题标签 [higher-order-components]

我正在一个项目中使用高阶组件包装器 (HOC)来绑定窗口/文档级别的事件处理。我有一些基于功能的组件，而另一些则是基于类的组件。我试图弄清楚我们如何确定是否为组件使用函数或类。通常，如果组件使用（简单）内部 UI 状态，或者需要连接生命周期方法，我会使用基于类的方法。

我的功能组件大多是纯函数，它们接受一些参数并简单地返回一个组件。像这样，

但是，如果某些功能组件需要条件逻辑来根据它们拥有的道具呈现不同的子组件怎么办。

在这种情况下使用基于类是否有意义？所以我可以使用渲染函数来创建子组件，然后简单地将其传递给渲染方法。像这样，

“但是你为什么要使用类，当同样的事情可以使用功能组件来完成的时候呢？” ..因为我遇到了一个问题，当我将组件包装在 HOC 中时，我在每个 onChange 事件上失去了输入字段的焦点。我读到这通常是因为该render函数不应该用于创建组件。它应该只传递渲染的组件。

但是由于我的功能组件中有这么多的渲染逻辑，那么创建一个类组件是否有意义，将我所有的渲染逻辑放在一个函数中并在render方法中调用这个函数。

这方面的任何信息都会有所帮助。

我有这段代码并试图用反应类包装一个 HOC。我首先想要的是覆盖默认参数的一部分。所以这是我的代码（你不需要阅读整个代码，问题只是关于 HOC 中的 defaultProps）

首先是组件：

现在的 HOC：

我想从 defaultProps 中删除 "markers: generateMarkers(MARKERS_COUNT, 0.0003)" 并从外部给出标记。

到目前为止我尝试了什么：

知道如何做这样的事情吗？我希望它可以顺利完成。谢谢！

我有一个更高阶的组件，我尝试对其进行一些修改（我不熟悉重组）。

这就是我的组件：

如果 mycenter 更新，我希望地图组件更新或重新渲染。我正在尝试从 https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js修改代码

我对代码做了一些修改。首先，地图中心设置为mycenter。这样可行。

之后，用户可以点击某处，中心将被修改

如果“mycenter”更新，有没有办法让组件重新渲染或更新中心？

我正在尝试在我的 React 项目中使用 Typescript，但在获取我的 HOC 功能的类型时遇到了困难。这是一个最小的示例来展示我遇到的问题：

这将返回错误：

我真的不明白为什么会发生这个错误。我一定做错了什么。一旦我介绍了道具，事情就会变得更加棘手。

我将非常感谢正确的解决方案，但我也很想了解为什么会首先出现此错误。

谢谢！

我正在为 eslint 使用 airbnb 配置，它给了我这个警告：

[eslint] 'isLoading' is missing in props validation (react/prop-types)

有没有办法为 isLoading 设置 PropTypes？

这是我如何使用它的示例：

我也将它发布到 jsfiddle：http: //jsfiddle.net/BernieLee/5kn2xa1j/36/

我正在创建一个高阶组件来包装扩展接口的组件：

我创建的工厂期望React.ComponentClass实现ClickOutsideInterface：

为了测试工厂，我实现了一个扩展ClickOutsideInterface

但是当我在函数中使用组件作为参数时clickOutside：

我收到以下参数类型错误Test：

“typeof Test”类型的参数不可分配给“ComponentClass & ClickOutsideInterface”类型的参数。类型“typeof Test”不可分配给类型“ClickOutsideInterface”。“typeof Test”类型中缺少属性“onClickOutside”。

为什么 Typescript 认为我没有在中实现接口的任何想法Test？

由于假设 HOC 被用作 mixin，可能与其他 HOC 一起使用，是否最好注入具有上下文但冗长的 prop 名称（例如，以 HOC 的名称为前缀）？

我想这应该被认为是一个最佳实践的问题。

因此，例如，对于这个 HOC 注入类似窗口的行为，哪个更好：

简短的非上下文命名

VS上下文命名（前缀）

或上下文命名（嵌套）

我有一个演示。在 HOC 中。
它将做两件事：处理状态并使用refs处理MyComponent.

当状态改变时我会遇到问题。
在proc函数中：instance将记录两次，值为null和MyCompenent instance。并且该值null是错误的值，但我不知道为什么instance在proc函数日志中两次。为什么instance是null？你能告诉我为什么吗？

我有一个在 recompose 中制作的 HOC，它的行为不正常 - 它只是在没有动画的情况下显示组件的最终值。编写为常规类的相同组件表现良好。有人可以告诉我是什么导致了这个问题，或者我将如何处理它以使其正常工作？

重构 HOC 组件：

普通班：

我想要一个包含每个组件视图的应用程序 HOC。此 HOC 对用户进行身份验证并设置 Google Analytics 跟踪。我正在升级到路由器 4，但无法使其正常工作。

它给了我以下错误-

这可能与我创建 HOC 的方式有关。有任何想法吗？

路由.js

);