Question

首先，一些背景。

我正在使用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返回时创建的AuthWrapper - ified组件...这引出了我的问题：

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

Answer 1

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

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

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

我也在我自己的应用程序中尝试了以下操作并且它有效。

using{}

与错误状态类似，您可能只是在应用中的某个位置返回无效组件。您的应用可能会抛出错误，因为您没有在渲染方法的括号中包含返回调用。

在Redux容器中使用更高阶的组件

1 个答案: