передача нескольких компонентов в компонент (контекстный 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>
      );
    };