问题标签 [higher-order-components]

React 的“渲染回调”或子函数似乎是 React 世界中的下一个新事物。为什么人们更喜欢它而不是更高阶的组件？（除了以性能为代价的漂亮的内联语法）它是否解决了 hoc 的任何问题？

对于render callback模式，我的意思是：

首先，一些背景。

我正在使用 Redux 来管理我的应用程序的身份验证状态，并将其Auth作为 Redux 容器（或智能组件）。

Auth我创建了一个接受并返回它的包装器（一个高阶组件） ：

在我看来，为了使用包装器，我只需要使用我想要在我的身份验证后面拥有的组件来调用它。例如，假设我正在验证一个UserPage使用包装器调用的组件，à la：

const AuthenticatedUserPage = AuthWappper(UserPage)

然而，当我像这样使用包装器时，React 对我并不满意。我收到以下错误：

我最好的猜测是它不喜欢connectRedux 在我从 ... 返回它时将创建的 -ified 组件，AuthWrapper这导致我的问题：

当这些组件创建 Redux 容器时，React 是否支持高阶组件？如果是这样，为什么 React 会抛出这个错误？

昨天，我正在阅读有关高阶组件的 React 文档，并尝试使用它们提供的一些示例。但是，对我来说，它不起作用。

这是我创建的一个简单的 HOC，只是为了包装另一个组件，看看它是如何工作的。但从一开始，它就没有奏效。

它总是返回我这个错误：

当我检查控制台中的 HTML 元素部分时，我发现这个 HOC 返回的实际值是<enhacedComponent></enhacedComponent>. 所以包裹的组件永远不会出来！

因此，最终，被包装的组件永远不会返回。只是应该是 HOC 参数的 JSX 版本。

我认为由于 JSX 只是另一种语法，而传递纯 JavaScript 的唯一方法是 using {}，所以我尝试这样做，但没有成功：

我真的不知道该做什么或我做错了什么。

我正在使用这个 HOC 参考。我在 Windows 10 上使用带有 webpack-dev-server 的 Webpack 2 作为工具。

我 在高阶组件上找到了 PropTypes这个例子

基本上，他们将 propTypes 添加到组件中，然后在装饰器中返回它。请参阅下面的代码副本。

我知道 react strip PropTypes 的生产版本，但它会像下面这样从内部函数中剥离它吗？

我正在尝试为 HoC 编写一个流类型，它将返回一个组件并向它添加一个 prop isVisible

我尝试了几件事但没有成功:(

在我的项目中，我试图摆脱所有的 mixin 并用 HOC 替换它们。我现在被困在使用 ES5 上。

在 mixin 内部，它有 acomponentWillMount和 acomponentWillUpdate运行一个update函数，该函数将遍历每个键data并更新 props/state。

在 React 的关于删除 mixins 的文档中，他们的 mixins 保存的是数据，而不是组件。

我的项目中有很多组件都有一个data对象并使用这个 mixin 来更新它们的 props/state。如何制作一个可重用的组件来处理这个数据对象？

此外，我什至如何从组件内访问此数据对象？在组件this.data中为空。mixinthis.data内部是组件内部的数据对象。为什么？

我正在尝试从 mixins 重构为 HOC，以便我可以升级到最新的 React（我目前正在使用 React 13/ES5）。当我的组件加载时，mixin 能够访问一个this.data具有query路由属性的数据对象。

在componentDidMount mixin 内部，它将查询该路由，取回数据并将其置于状态。

这从我的组件中提取了很多样板。我不必componentDidMount在每个组件上运行 a，只需拥有data对象即可。

我把这个 mixin 分散在整个项目中。它实际上做的远不止这些，但我只是想把它简化一下，例如起见。

HOC 进来了。我把所有的东西都拿出来data放进去getInitialState。现在我已经data了解了现在包装的组件的状态，我该如何访问它？和我的 mixin 一样，我希望我的 HOC 能够处理我的componentDidMount、访问data.query和获取数据。我不想必须重写每个组件才能拥有componentDidMount.

PS-我通常使用最新版本的 React 和 ES6，如果有人能告诉我为什么 mixin 可以做this.data而我的组件不能，那将非常有帮助。在最新版本的 React 中，你不能定义除此之外的对象render()。

考虑以下代码。Wrapper1渲染，将组件作为道具Wrapper2传递给它，以及最终期望的几个道具，以及. 然后渲染传递给它的组件，将它的所有道具传递给该渲染的组件。在这种情况下，组件由 渲染，并且它正在接收所需的道具。FinalFinalfinalPropw2propWrapper2FinalWrapper2

但是，Flow 不理解这一点。我收到以下两个错误：

1. propertyfinalProp在对象类型中找不到属性 另请参阅：React 元素Wrapper2
2. propertyw2prop在对象类型中找不到属性 另请参阅：React 元素Wrapper2

根据错误消息，Flow 显然明白这Final是由Wrapper2. 但是，它没有意识到正在提供必要的道具。我觉得这很奇怪。如果它可以告诉props.componentin Wrapper2is Final，那么我希望它知道 in 的全部范围props。

如果我添加finalProp和w2prop，type Wrapper2T那么 Flow 很高兴。但这是一个非首发，因为Wrapper2它应该是一个高阶组件，它不知道它最终呈现什么组件。

我应该用不同的方式来注释这些流类型吗？或者创建和渲染这些组件的不同模式？我认为我上面的内容是 React 中的标准模式，因此必须有一些解决方案。

我正在尝试用打字稿编写 React HOC，但我没有得到正确的定义。我不确定我想要完成的事情是否可行。

这是我的代码

如果我只是将道具和状态传递给孩子，它会起作用。但是如何编写定义以便能够将其他道具传递给包装的组件？在这种情况下，changeRequest 道具。

谢谢

I'm writing a React higher-order component (HOC) with TypeScript. The HOC should accept one more prop than the wrapped component, so I wrote this:

In other words, hoc is a function that yields the actual HOC. This HOC is (I believe) a function that accepts a Component. Since I don't know in advance what the wrapped component will be, I'm using a generic type TChildProps to define the shape of the props of the wrapped component. The function also returns a Component. The returned component accepts props for the wrapped component (again, typed using the generic TChildProps) and some props it needs for itself (type HocProps). When using the returned component, all of the props (both HocProps and the props for the wrapped Component) should be supplied.

Now, when I attempt to use my HOC, I do the following:

But I get a TypeScript error:

It seems to me TypeScript is not replacing TChildProps with the shape the of the props needed for ChildComponent. How can I make TypeScript do that?