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

Question

我有两个<AuthConsumer>,<PeopleConsumer> 它属于 HOC，如下所示：

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

像这样使用是有效的，我可以获得授权作为道具。

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）

passing multiple props to component (context API)

reactjs

react-context