问题标签 [higher-order-components]

我有很多模板组件，它们的使用方式彼此相似。在渲染到页面之前，模板组件被包裹在 graphql 中并连接到 redux。我想创建一个 HOC 来包装我的模板，这样我就不会每次都创建一个新容器来将模板连接到数据。像这样：

这是我的页面组件，我尝试用gqlList HOC包装AppointmentsListTemplate模板：

这是我的 gqlList HOC：

但是 graphql 连接器部分向我抛出了这个错误：

未捕获的类型错误：无法在新 eval （gqlList.js:22 ) 在 eval (createClassProxy.js:95) 在 Unknown (eval at proxyClass (createClassProxy.js:NaN), :4:17) 在 eval (ReactCompositeComponent.js:303) 在 measureLifeCyclePerf ( ReactCompositeComponent.js:73) 在 ReactCompositeComponentWrapper._constructComponentWithoutOwner

我究竟做错了什么？

我有一个需要看起来像这样的视图：

但我想在我的布局中使用这样的：

所以基本上我想写一个CustomComponent来将它的子ViewGroup注入到带有id“wrapped”的ConstraintLayout中，在它下面添加一个按钮并将整个东西包装在“wrapper”ConstraintLayout中。

在像 React 这样的库中，这可以使用组合现有视图并向其添加功能的 HOC 来完成。但是在这里实现起来似乎并不那么直观。

我的方法是这样的：

所以基本上 ViewGroup 是在最后添加的，所以我必须手动删除它，然后再将它添加到“包装的”ConstraintLayout。这似乎很浪费，甚至容易出错；有一个更好的方法吗？

我正在使用 react 和 redux。

我有更少的状态文本输入。我可以像这样使用

<TextInput error={true} /> // Uncontrolled and staelss

所以我可以通过订阅 redux 商店来使用 error/success... 道具。而且我还想提供一种在本地状态下进行验证的方法，用于在一些简单的情况下将状态保存在 redux 存储中会很复杂。

所以我想到了两种方法。

方法 1 HOC withValidation

方法 2 创建另一个使用无状态、不受控制的版本的组件

请帮我选择最好的抽象。谢谢。

I am trying to create an HOC which makes a regular functional component »Touchable«.

So I have that an HOC like that:

Another Component like so:

Using this like so:

results in (react developer Panel):

But what I really would like to have is:

I have tried to clone the Instance, but somehow I have no luck. How can I do that?

我有一个没有地图的 google.maps.places.SearchBox 的反应组件，它是一个 StandaloneSearchBox。我想传递带有初始值的道具（这只是地址的格式化版本，例如“伦敦，肯塔基州，États-Unis”），然后能够更改输入字段中的地址。

我在该州有一个 places 属性，我想保存它的 place 对象。如何在 componentDidMount() 方法的开头传递初始值，以便将其设置为 places 对象？它不能以这种方式工作。

我一直在研究高阶组件的反应。我的要求是我有一组组件，我需要对其进行扩展以赋予它们更多功能，而无需重写整个组件。在这种情况下，我在 react 中发现了 HOC 概念，可以使用纯函数扩展组件。我的问题是，我可以将扩展组件导出为普通组件吗？举个例子

需要扩展的组件

HOC 组件

我可以那样使用组件吗？还是我做错了？

我可以在 React 中使用任何高阶组件作为装饰器吗？还是需要重写？

所以我知道您可以通过以下方式访问组件的子级this.props.children：

如果我对 Bob 和 Sally 感兴趣，这很好，但是如果我想与组成的组件（MyComponent即如下所示）进行交互怎么办？Subcomp1Subcomp2

用例

我正在尝试创建一个管理包装组件子组件的选项卡索引（漫游选项卡索引： https ://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex）的高阶组件，所以如果我能获得包装组件的引用并按类型过滤它的子组件，那就太好了。

到目前为止，似乎唯一可行的方法是让每个组件为其每个子组件存储一个 ref，但这很乏味并且有点违背 HOC 的目的。有没有通用的方法来访问这些子组件？

我正在尝试做的一个粗略的例子：

我正在尝试在 react/redux 应用程序中单击按钮时将加载器添加为高阶组件。

已经有工作加载器组件和样式，只需要在单击按钮时设置逻辑显示加载器并隐藏现有按钮。

按钮组件：

装载机：

在 Loader 组件中，我在需要编写逻辑的地方添加了注释，何时设置加载器或按钮。

我遵循了这个例子：ReactCasts - 高阶组件

我搜索了很多示例，但其中大多数显示了如何设置加载器然后是数据获取，但在我的情况下，我只需要显示然后触发 onClick 方法。

那么 onClick 方法被触发时如何设置逻辑呢？这是一个好的方法吗？此外，最好尝试使用 redux 状态来完成此操作，但不知道如何执行此操作。

任何帮助将不胜感激。

所以我最近一直在阅读 HOC，并决定在我的应用程序中使用它们来将授权逻辑传递给子组件。

我正在尝试<Route />通过 HOC 呈现组件，但它记录了错误：

未捕获的错误：AuthRoute(...)：必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象。

这是 HOC 的代码：

然后我使用这个 HOC 作为<Route />组件的别名，如下所示：

编辑：

但这种方法效果很好：