在 Redux 容器中使用高阶组件答案

【问题标题】：Using higher order components with Redux containers在 Redux 容器中使用高阶组件
【发布时间】：2017-07-20 06:33:32
【问题描述】：

首先，一些上下文。

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

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

export default function AuthWrapper(WrappedComponent) {
  class Auth extends Component {
  ... <Auth stuff here> ...
  }
  return connect(mapStateToProps, mapDispatchToProps)(Auth);
}

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

const AuthenticatedUserPage = AuthWappper(UserPage)

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

Warning: AuthenticatedApp(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我最好的猜测是它不喜欢 Redux 将创建的 connect-ified 组件，当我从 AuthWrapper... 返回它时，这引出了我的问题：

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

【问题讨论】：

也很重要：stackoverflow.com/questions/42307736/…

标签： javascript reactjs redux higher-order-components

【解决方案1】：

这是我的两分钱。我认为错误发生在其他地方。

根据react-redux 中connect 函数的简化版本，connect 函数只是返回另一个react 组件。因此，在您的情况下，您正在返回一个组件，该组件包装在另一个组件中，它仍然有效。 容器基本上是一个组件。

阅读https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e 以更好地了解连接功能。

我还在我自己的应用程序中尝试了以下方法，并且成功了。

import Layout from '../components/Layout'
//Do some other imports and stuff
function wrapper(Layout) {
  return connect(null, mapDispatchToProps)(Layout);
}
export default wrapper()

与错误状态一样，您可能只是在应用程序的某处返回了无效组件。您的应用程序可能会抛出错误，因为您没有在渲染方法的括号中包装返回调用。

【讨论】：