Question

我有两个<AuthConsumer>，<PeopleConsumer> 像这样属于HOC：

    const withAuth = WrappedComponent => {
      return () => (
        <AuthConsumer>{props => { console.log(props); return <WrappedComponent auth={props} />}}</AuthConsumer>
      );
    };

使用这样的作品，我可以获得auth作为道具。

export default withAuth(withRouter(LoginPage));

但是，当我累export default withPeople(withAuth(withRouter(LoginPage)));不能正常工作时，我就无法获得授权，人们只能作为道具。

所以我查阅了官方文件，上面写着：像这样使用从contextAPI传递多个道具

    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>

所以我尝试了这个，但是看起来很丑：

const withTest = WrappedComponent => {
  return () => (
    <AuthConsumer>
      {auth => (
        <PeopleConsumer>
          {people => (
            <WrappedComponent auth={auth} people={people} />
          )}
        </PeopleConsumer>
      )}
    </AuthConsumer>
  )
}

就我而言，有更好的方法来提供多个道具吗？

如果您需要信息，请告诉我。

谢谢。

Answer 1

    const withAuth = WrappedComponent => {
      return (props) => (
        <AuthConsumer>{auth => { console.log(props, auth); return <WrappedComponent {...props} auth={auth />}}</AuthConsumer>
      );
    };

将多个道具传递到组件（上下文API）

1 个答案: