问题标签 [high-order-component]

我正在与 HOC 注入的道具类型作斗争。

很简单，在 App Component 中，有两个 props：title和message.

但是title由 HOC 提供。

这是此的代码：

看起来不错，但是当我运行流程时，它失败了

缺少道具的类型注释。

32| 导出默认的 injectProp(App);

所以我尝试了这个，但没有运气：

现在我收到了一堆错误消息。

使用 flow-bin@0.69.0 和 React@16.3.0。我错过了什么？为什么让 Flow 抱怨不需要的类型注释？

我有一个 react HoC，它将两个参数（翻译功能和当前语言环境）添加到组件道具中。效果很好。但是我开始用 TypeScript 重写项目，我不知道该怎么做。

我的观点与how-to-handle-props-injected-by-hoc-in-react-with-typescript非常相似。但是我的 HoC 中多了一个 HoC。

“react-intl”中的 injectIntl​​ 有分型

我试着用

它不工作。

TS2322：类型 '{ t: (key: string) => string; 语言环境：字符串；}' 不可分配给类型 'T'。

TS2322: 类型 'ComponentClass, any> & { WrappedComponent: ComponentType; }' 不可分配给类型 'ComponentType'。类型 'ComponentClass, any> & { WrappedComponent: ComponentType; }' 不可分配给类型 'ComponentClass'。类型“组件，任何，任何>”不可分配给类型“组件”。属性“道具”的类型不兼容。类型 'Readonly<{ children?: ReactNode; }> & Readonly>' 不可分配给类型 'Readonly<{ children?: ReactNode; }> & 只读'。类型 'Readonly<{ children?: ReactNode; }> & Readonly>' 不可分配给类型 'Readonly'。

谁能帮我？

我试图将存储在该州的数组中的所有卡路里加起来。

这是存储在状态数组餐点中的数据结构

我目前正在运行一个 forEach 并使用 reducer 将值相加，但它说“reduce”不是一个函数我不确定我做错了什么。

我试图在 jsx 中显示膳食中的卡路里总量

我在这里是通过使用反应订单组件编写谷歌地图组件来实现的。但是当我试图运行它时，我遇到了某种错误。

你可以看看它，让我知道这里有什么问题。我收到以下错误，例如 Invariant Violation: Required props containerElement or mapElement is missing。您需要同时提供它们。该google.maps.Map实例将在 mapElement 上初始化，并由 containerElement 包装。您需要同时提供它们，因为 Google 地图要求 DOM 在初始化时具有高度。

问候

我正在尝试按照函数式编程进行设置。出于某种原因，我的index.js文件没有将道具传递给我的HelloWorld.vue组件。下面是 index.js 文件。

下面是应该接收道具但不是的 vue 组件：

在查看 vue devtools 时，我可以看到所有道具都undefined没有接收到索引文件中定义的值。

有没有办法将数据从组件的状态发送到 HoC？

我的组件

我的 HoC 组件：

有没有办法做到这一点？

唯一的选择是提供必须从外部到 SendScreen 组件的道具吗？

我正在尝试将现有的反应组件（react-select）包装在高阶组件（HoC）中，以提供一些条件渲染逻辑。我面临的困难是让 TypeScript 生成一个结合了 HoC 包装器和 Wrapped 组件属性的组件。

例如：

实现此目的的正确方法是什么？

反应 16.8.3 打字稿 3.3.3

我写了一些 HOC，我需要将我在某个生命周期级别创建的动态对象传递给这个 HOC，但我没有将他作为道具。如果我尝试传递一些静态值（例如从开始初始化 myObj），它会按预期工作并且我得到正确的值。

假设这是我的组件类：

这是我的 HOC：

我在“测试”类上创建的“动态”对象在我的 HOC 类上始终为空。当我尝试直接从我的道具传递一些值时也会发生这种情况，在这种情况下页面被卡住（控制台中没有错误）。

有人知道如何解决这个问题吗？谢谢！

TL；DNR：我使用的是 TypeScript 3.3.3。有没有更好的方法来声明从 HOC 注入的我需要的道具，而不会使它们对消耗我的组件的代码可见？

withNamespaces考虑一个用HOC装饰的基本组件。使用的库和 HOC 是任意的，我在使用任何遵循此模式的组件时都遇到了这个问题。类组件也有点问题，但这里我将重点介绍函数。

我有第二个文件，其中包含对我的组件的测试。

现在这不会编译，因为t我的道具中没有定义。我可以尝试通过多种方式解决此问题。在这个例子中，第三方库为我们提供了一个WithNamespaces定义 的类型t，以及一些注入到我们组件中的其他东西，withNamespaces我们可以将它们用作或与我们的 props 类型定义合并。

现在MyComponent编译并为我可能的道具提供了很好的类型安全性。但是，现在我的测试文件很生气，因为我没有为组件定义期望的 props 提供值，例如t. 然而，我们知道这将被 HOC 注入，所以创建一个 mock 或为这个 prop 提供一些垃圾的值只会令人困惑，而且修复类型问题的额外工作是不必要的。

我可以通过使我的组件的 props 部分 ala 来捏造它FunctionalComponent<Partial<WithNamespaces>>，但是现在我必须有条件地检查我需要或使用的那些 props t!（非空断言运算符），这些看起来不必要地烦人，融化了 TS 新手的大脑，而且似乎有点臭。

我也可以在我的渲染函数（或在类中，任何访问道具的方法）中投射道具，以向我的消费者隐藏注入的道具：

不过，这有点笨拙和不雅。还有许多其他方法，比如转换为 any 并返回到不引用 WithNamespaces 的东西等，但肯定有更好的方法来做到这一点吗？

杂项

withNamespace确实有一个定义，它使用该Omit模式从返回的类型中排除道具WithNamespaces，但这似乎不起作用，至少对于功能组件。

我有一个包含多个组件的文件，我想导出并连接到 redux，我该怎么做？

连接包装器需要导出默认值，但我有多个组件。