时间戳

首页 > 解决方案 > 如何通过 React 上下文传递 props 和使用 HOC

reactjs - 如何通过 React 上下文传递 props 和使用 HOC

问题描述

我需要做这样的事情

const CreateActivity = (props) => (
<AuthUserContext.Consumer>
  {authUser =>
    <CreateActivityShow  email={authUser.email} {...props}/>
  }
</AuthUserContext.Consumer>

const authCondition = (authUser) => !!authUser;
export default withAuthorization(authCondition)(CreateActivity);

这样我就可以在 createActivity 中正确使用我的 HOC 组件，但是在 CreateActivityShow this.props 上只有 this.props.email 而不是我应该使用 this.props.match 的 url 参数...

我试过这种方式

  export default props =>  (
<AuthUserContext.Consumer>
  {authUser =>
    <CreateActivityShow {...props} email={authUser.email}/>
  }
</AuthUserContext.Consumer>
)

现在我有了道具，但我不知道如何在这里使用我的 HOC

有没有办法同时做这两件事？

编辑：

我试过这个

 export default withAuthorization(authCondition)( props =>  (
<AuthUserContext.Consumer>
  {authUser =>
    <CreateActivityShow {...props} email={authUser.email}/>
  }
</AuthUserContext.Consumer>
))

现在我再次用 withAuthorization 包装了我的组件，但是道具现在没有被传递，我不知道为什么......

这是我的 HOC

const withAuthorization = (authCondition) => (Component) => {
  class WithAuthorization extends React.Component {
  componentDidMount() {
    firebase.auth.onAuthStateChanged(authUser => {
      if (!authCondition(authUser)) {
        this.props.history.push(routes.SIGN_IN);
      }
    });
  }

render() {
  return (
    <AuthUserContext.Consumer>
      {authUser => authUser ? <Component /> : null}
    </AuthUserContext.Consumer>
  );
  }
}

return withRouter(WithAuthorization);
}

export default withAuthorization;

标签： reactjs

解决方案

是的，所以问题出在WithAuthorization组件中，您没有将 HOC 收到的道具传递给渲染的组件。你会这样写

const withAuthorization = (authCondition) => (Component) => {

    class WithAuthorization extends React.Component {
      componentDidMount() {
        firebase.auth.onAuthStateChanged(authUser => {
          if (!authCondition(authUser)) {
            this.props.history.push(routes.SIGN_IN);
          }
        });
      }

        render() {
          return (
            <AuthUserContext.Consumer>
              {authUser => authUser ? <Component {...this.props}/> : null}
            </AuthUserContext.Consumer>
          );
        }

    }

    return withRouter(WithAuthorization);
}

export default withAuthorization;

推荐阅读