reactjs - HOC 传递属性

Question

我最近正在努力解决复杂的 HOC 问题，以及如何仅传递其中定义的新 Prop 而不是任何其他 Prop 。更准确地说，假设我的 HOC 使用其他 HOC 来扩展其属性，例如

const withSession = (WrappedComponent) => {

  class SessionProvider extends React.PureComponent {
    constructor(props) {
      super(props);
      this.login = this.login.bind(this);
    }

    login() {
      console.log('login'); // this will dispatch some action
      // this.props.dispatch... 
    }

    render() {

      return (
        <WrappedComponent
          doLogin={this.login}
          {...this.props} 
        />
      );
    }
  }

  const mapStateToProps = null;

  function mapDispatchToProps(dispatch) {
    return {
      dispatch,
    };
  }

 const withConnect = connect(mapStateToProps, mapDispatchToProps);

 return compose(
    withConnect,
    withRouter,
  )(injectIntl(SessionProvider));
};

此处，SessionProvider 使用 dispatch 和 injectIntl​​ 将属性附加到其 props。但是，我不想将这些 Prop 传递给包装的组件。这个想法是拥有一个 SessionProvider HOC，它具有一些 API 调用，但仅使用 login 扩展包装的组件。我注意到，如果保留 {...this.props}，则包装的组件还将获得我不想传递的 HOC 使用的所有 props 。因此我想到通过更改 HOC 渲染方法来分解 this.props 来显式定义要传递哪些属性:

render() {
  const { dispatch, intl, ...otherProps } = this.props;
  return <WrappedComponent doLogin={this.login} { ...otherProps} />;
}

但是，如果 WrappedComponent 本身具有 dispach 或 intl 属性，那么这些属性不会通过 HOC 传递。

我的做法有什么问题吗？还有更好的方法吗？我错过了什么吗？

Answer 1

你所做的事情没有任何问题。使用 HOC 时， Prop 名称冲突是一个已知问题。因此，据我所知，您可以使用的最佳替代方案是 Render Props 模式，这有助于使组件渲染尽可能具有声明性。对于您的情况，请考虑这样的事情:

class Session extends React.PureComponent {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
  }

  login() {
    console.log("login"); // this will dispatch some action
    // this.props.dispatch...
  }

  // ...

  render() {
    return (
      <React.Fragment>
        {this.props.children({
          doLogin: this.login
          doLogout: this.logout
          // ...
        })}
      </React.Fragment>
    );
  }
}

// ...

return compose(
  withConnect,
  withRouter
)(injectIntl(Session));

并从其他组件中使用它:

// ...
render() {
  return (

    <Session>
      {({ doLogin, doLogout }) => (
        <React.Fragment>
          <SomeComponent doLogin={doLogin} />
          <button onClick={doLogout}>Logout</button>
        </React.Fragment>
      )}
    </Session>

  )
}

更新:

有一个非常有前途的 Hooks Proposal 在v16.7.0-alpha中提供。我对它们还不太熟悉，但它们往往能更有效地解决组件的可重用性。