问题标签 [high-order-component]

我有一些组件，比如博客文章，我希望该博客文章是可编辑的（即双击标题使其可编辑），但只能在管理面板中。

所以我可以修改组件以使其具有类似的属性，editable但是我的组件会有很多大部分时间不需要的逻辑。（这增加了最终用户的捆绑包大小）

理想情况下，我可以重用组件（用于视觉方面），但向它添加行为（如可编辑内容）。

我可以通过 HOC 实现这一目标吗？有这种模式吗？

谢谢

这是我的父组件（网格），（这里我传递了更多 hoc 使用的道具，但我在这里省略了它们）：

这是表格组件：

这是临时的：

但是当它编译时它说：Element QuickBooksTable doesn't have required attribute (here is another props name). 我应该如何使用类型和泛型来消除这个错误？我试图阅读文档，但我不明白我做错了什么。

我有两个任务：

1. 用 HOC 替换装饰器
2. 是否可以构建一个返回纯函数而不是类的 HOC？又有多大意义，速度会不会有显着提升？

// _app.js

// 我的装饰器

我想用 HOC 替换装饰器，以便 _app 组件本身可以成为一个函数：

// HOC（我如何做 HOC 返回“类”）：

我想使用该功能：

并相应地更改 _app.js 中的导出：

当然！，我得到一个错误，因为我没有在函数中调用 getInitialProps：

事实是/pages中的页面也包裹在 HOC 中，并且在浏览器中它还说没有ctx

如何正确调用 getInitialProps 并进一步返回包装的组件？谢谢你的帮助！

我在这里有一个 HOC 包装的功能组件

我该怎么getInitialProps写myComponent？

我应该打电话进来myComponent吗？getInitialPropswrapperHoc

我正在学习 React（目前是高阶组件），但我遇到了一个问题。在我的练习中，组件有时显示数据，有时不显示。我的代码由两个组件组成

DisplayList - 显示 props 传递的数据的组件

GetAndDisplayData - 接收 DisplayList 组件、API 的 url 和所需参数的高阶组件（从 API 获取）

代码：

显示列表.js

GetAndDisplayData.js

和 HOC 的呼唤

我想这个问题是关于异步的，因为如果我使用一些简短的数据列表，一切都很好，但是如果我使用这个 API 和列表中 250 个对象的列表，有时数据不会显示（有时会显示）。我究竟做错了什么？

我目前正在将 React 应用程序迁移到 Typescript，而我唯一缺少的是嵌套 HOC 具有正确类型的传入和传出道具。

拥有一个 HOC 并放入一个组件可以正常工作，但是一旦我想嵌套这些，我就会从 Typescript 编译器中得到错误。

我试图通过创建一个相当简单的示例来理解它（因为在我们的代码库中它有很多嵌套的 HOC），但我仍然缺少嵌套 HOC 的正确类型，而且我不明白应该如何完成它。

假设我有两个 HOC（都有一个需要在包装组件上设置的道具，以及一个将添加到包装组件的道具）：

这是包装好的组件，包括嵌套的 HOC：

带有return withTitle<TProps>(withImprint<TProps>(WrappedComponent));显示错误的行：

我尝试了几种使用泛型的组合，但我没有找到解决方案。不用说，代码本身可以找到，并且在使用时一切都正确呈现：

我使用上面的代码创建了一个带有工作示例的沙箱：https ://codesandbox.io/s/shy-sun-3g191

我编写功能性 HOC 以在组件中添加查询。HOC 必须接受功能和类组件。

我写了这段代码：

这个 HOC 这么称呼：

HOC工作。我不喜欢any。需要将propsHOC 中的 WithList 类型从您的更改any为您的。

我想在我自己定义的 Layout 组件中渲染嵌套的 React 组件，但我不知道如何递归调用 reduce/map 以便根据 Layout 结构正确渲染子级中的子级作为屏幕截图。

有人可以建议吗？

源代码