问题标签 [higher-order-components]

我有一个场景，我想创建一个 HOC，当它们发生在 HOC 上时检测鼠标事件（例如mouseenter， ） ，然后传递一个特殊的道具（例如）。我通过使用回调来获取包装的组件实例，然后将事件侦听器添加到我的 HOC 中的包装实例来实现这一点。mouseleaveWrappedComponentWrappedComponentcomponentIsHoveredref

问题是，这似乎只在WrappedComponent是 类组件时才有效 - 对于功能组件，ref总是null。我会尽快将WrappedComponent内部<div></div>标签放在我的 HOC 中并在该 div 包装器上执行事件检测，但问题是即使是普通的 div 标签也会将其设置WrappedComponent为块元素，这在我的用例中不起作用HOC 也应该适用于内联元素。任何建议表示赞赏！

问题基本上是如何确保对以典型 JavaScript 方式实现的高阶组件进行类型检查。

通过类型检查，我的意思是使用两个最突出的实用程序中的任何一个：TypeScript或flow。

到目前为止，我已经在 TypeScript 中提出了以下代码段，

如果我这样写mixin

然后它认为superclassasany并且错误地错过了调用的错误cMethod。

这似乎至少在 TypeScript 中是可能的，因为它们例如可以Object.assign正确地为instance工作。但是我需要相同类型的构造，但是对于classes。

还是我们需要像Ruby 类这样的类类型？

我正在构建这个 HOC 模态。

当我按下 Modal 上的按钮“Aplicar”(TouchableItem:onPress) 时，我需要访问 WrappedComponent 状态。

有什么办法吗？

笔记：

ModalHOC 是一个简单的 React Native Modal。

提前致谢！

我创建了这个用户可以传入两个组件的 HOC，它返回了一个很棒的字体堆栈图标。

我需要区分容器、基础图标和顶部图标之间的不同道具，因此我决定传递一个具有容器（字符串）、基础（对象）和顶部（对象）属性的对象。

例如，

这种方法的最大问题是 propTypes 和 defaultProps 不起作用。

由于 defaultProps 不起作用，我决定将它们注释掉并硬编码基本和顶部图标组件的道具，但随后消费者可以通过传入适当的道具来覆盖默认道具。

用法：

1. 如何修复 propTypes 和 defaultTypes？
2. 有没有更好的办法？

我确实尝试过这样的事情：

但我不喜欢这样做：

非常感谢 Yury Tarabanko！ 这是我更新的工作版本：

如果用户在菜单外单击，我将使用react-click-outside它来隐藏下拉菜单。通常，我会像这样导出组件：

但是，在这种情况下，我想导出组件

但这显然行不通。有没有办法使用导出{}并应用高阶组件功能？

所以我有一组基础组件，其道具类型设置为：

现在我有一个 HOC 将注入theme道具，因此这个新创建的组件的用户不必/不应该传递theme道具。测试表明以下代码不起作用（合并同一字段的类型）......

无论如何，我编写了 HOC，但我不确定流类型在我描述的场景中是否有效。作为附加要求，新创建的组件仍然可以传递一个theme应该与注入的 prop 合并的 prop theme。这是 HOC 的代码：

它是否正确？

我正在研究一个接受数据项列表的 React 组件，一个从数据项构造组件并将这些项格式化为表格的函数。代码看起来像这样：

（其中collateRows是将数据值分配到二维行和列数组中的函数）

我想知道的是，我如何编写keyOf那里引用的函数：它需要生成一个标识符，该标识符对每个项目都是唯一的，但在对同一项目的调用之间保持一致。它还需要尽可能少地了解数据项本身，因为它旨在成为一个完全通用的组件，可用于任何合理的数据类型。

我所知道的是该template属性是一个返回 React 组件的函数，并且该组件具有key包含适当值的属性。但我似乎无法访问该属性（我得到undefined一个警告，说我应该提供另一个具有相同值的道具，但是因为我希望能够将它与任何组件类型一起使用，我不看看这将如何工作......），那么我能做些什么呢？

在展示如何创建高阶组件时，大多数示例都使用 function 关键字。

以下来自 React 文档的示例：

在我工作的地方，我们使用 TypeScript，并且我们有 TS-lint 规则不使用 function 关键字。

所以 JS 版本的高阶组件看起来像这样：

问题是：有什么区别吗，使用带有 function 关键字的语法有什么好处吗？

我遇到了一个问题，我可以将一个类或一个功能组件传递到我的 HOC 中。在 HOC 中，我需要访问正在传入的组件上的静态属性（PAGE）。这里的问题是，FLOW 给了我一个错误，说它找不到正在传递给 HOC 的 PAGE 上的静态属性：

Error:(50, 21) Flow: property getInitialProps. Property not found in statics of React$Component.

该错误来自以下代码中的这一行：

任何帮助将不胜感激 - 我的全部内容：

我想知道在propTypes将用 3rd-party HOC 包装的组件上定义的最佳实践是什么，在这种情况下，withRouter()来自React-Router.

我的理解是，这样做的propTypes目的是让您（和其他开发人员）知道组件应该期望什么 props，如果违反，React 会发出警告。

所以，既然关于位置的道具已经过去了withRouter()，没有人为干预，这里有必要担心吗？

这是我正在使用的组件：

在这种情况下，约定是什么？