问题标签 [high-order-component]

我正在尝试为 Backhandler 实现 HOC。我有 3 个组件都包裹在 createBottomTabNavigator 中，home 就是其中之一。但在实施反处理之前，HOC 显示此错误。

组件首页-

HOC 更新组件

我搜索了建议，但找不到任何答案。我基本上认为我可以正确键入 HOC，如下所示：

这是我目前的组件：

我想我可以改变：

对此：

它将需要导入 ComponentType。我的问题是我应该在哪里更改我当前的代码并添加 PassedProps？

我将一个函数组件传递给高阶组件，该函数组件具有一些静态属性作为示例！如何从返回的组件中获取静态属性！

我正在尝试创建一个包装器 HOC，我可以在其中选择要传递的生命周期挂钩。我尝试了以下 HOC：

用于包装原始组件的组件：

最后是生命周期钩子：

编辑：没有编译错误被抛出，但控制台日志不会触发打印“测试”

我在 nextJS 应用程序中使用了一些 HOC 组件来通过getInitialProps. 但我需要为这些道具使用动态值。

在我的索引组件中，我正在调用withServerProps. 是否可以将一些字符串数组传递给它？

index.js

我需要在这个函数中获取字符串数组：

with-server-props.js

我创建了必须通过连接函数连接到 redux 存储的高阶组件。实际上一切都在纯 Javascript 中工作，但我想在这里使用 Typescript。有一个与道具输入有关的错误。

我正在为 Wrapped Props 组件使用通用类型，而且我的高阶组件有他自己的 Props 类型。所以我想通过&运算符连接它们，但是我从连接函数中得到错误..

WithSatsFormProps是空接口

错误信息：

“typeof WithSatsForm”类型的参数不能分配给“ComponentType, WithSatsFormProps & P>>”类型的参数。类型 'typeof WithSatsForm' 不可分配给类型 'ComponentClass, WithSatsFormProps & P>, any>'。参数 'props' 和 'props' 的类型不兼容。

在我花时间在 react 和几篇文章上，我问自己如何将 HOC 重构为钩子，以及它是否有用以及为什么，

这是一个需要重构的小组件

根据官方文档：

Hooks 会取代渲染道具和高阶组件吗？

通常，渲染道具和高阶组件只渲染一个孩子。我们认为 Hooks 是服务于这个用例的一种更简单的方式。这两种模式仍然存在（例如，一个虚拟滚动组件可能有一个 renderItem 属性，或者一个可视容器组件可能有它自己的 DOM 结构）。但在大多数情况下，Hooks 就足够了，并且可以帮助减少树中的嵌套。

我使用这个 HOC 只是为了给组件添加一些预定义的空间。

将它重构为钩子真的会更好，你能解释一下为什么吗？

如果是，将其重构为 hook 的最佳方法是什么？

我用 HOC 包装我的组件的导出，向它添加了 prop，但是 TypeScript 没有看到 HOC 已经添加了这个 prop（这是必需的）。

零件：

特设：

语境：

应用程序：

引发 TS 的错误： Property 'text' is missing in type '{}' but required in type 'Props'

预期行为：TypeScript 知道 withText HOC 已经添加了 'text' 属性

链接到代码框 ->这里

我已经看到包和库能够console.log使用 HOCs + 基本组件。由于以下原因，我对如何实现它感到非常困惑：

• 类组件的名称定义为component.displayName
• 功能组件有component.name
• HOC 没有获取嵌套 HOC 和组件名称的标准方法

例如一个样本 HOC

据我所知，这真的是如何得到的。例如，在获取名称react-redux方面有自己的约定，但这意味着我在搜索名称时只能“深入一层”。

如果我有一个这样包装的组件：

如何console.log使用我的示例 HOC

或具有相同表现力的类似事物？

由于 SEO 中的问题，我正在尝试将我的客户端应用程序转换为呈现的服务器端。对于客户端，我使用了反应路由器，它在渲染时将道具传递给其他子组件。

以下是当前代码

应用程序.js

常量

主屏幕组件（在子组件中获取此处的值）

控制台截图

我不确定如何使用 Next/router 来实现这一点，已经尝试过遵循 next.js 文档。

样品的任何帮助将不胜感激。