5

首先，一些背景。

我正在使用 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.

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

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

4

1 回答 1

6

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

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

阅读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()

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

于 2017-03-01T04:47:07.987 回答