Reactjs 这条路对吗？

我错误地编写了两个版本的HOC实现，但它没有给我带来任何错误，也没有按预期工作，所以我希望有人能够解释这些差异<代码>requireAuth是更高阶的组件

首先，我有一个组件如下

import requireAuth from 'somepath';

class App extends Component {
  ...
}

export default connect(null, actions)(requireAuth(App));

下面是我的

requireAuth

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default (ChildComponent) => {
  class ComposedComponent extends Component {
    ...

    render() {
      return <ChildComponent {...this.props}/>;
    }
  }


  function mapStatetoProps(state) {
    return { someProp: state.someState };
  }

  return connect(mapStateToProps)(ComposedComponent);
};

---

使用HOC需要记住的第一件事是，任何封装在HOC中的react组件仍然会生成react组件

在第一种情况下：

connect（null，actions）（requireAuth（App））

将为
requireAuth
提供重复使用道具。它正在将其道具传递给
App
组件。因此，应用程序组件仍然从redux获得所有道具。据我所知，它是有效的

对于第二种情况：

requireAuth（connect（null，actions）（App））

您正在将
connect（null，actions）（App）
作为子组件传递给
requireAuth
组件。并且仅呈现子组件
返回
。因为
App
组件仍然由
connect
包装。
App
组件仍然具有执行所需的所有redux道具。因此，不使用道具渲染
ChildComponent
仍然有效。
以及从
返回{someProp:state.someState}获得的props
仍然可用于
requireAuth
，因为
requireAuth
被包装在另一个连接中，该连接将从react状态提供
requireAuth
所需的道具

所以这两种情况在理论上看起来都不错。我们的存在是为了让我们的生活变得更好，而不是让人困惑。你提出的第一个案例实际上是正确的处理方法

import requireAuth from 'somepath';

class App extends Component {
  ...
}

export default requireAuth(connect(null, actions)(App));//<<=== use requireAuth to surround the whole connect statement instead 

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default (ChildComponent) => {
  class ComposedComponent extends Component {
    ...

    render() {
      return <ChildComponent />; //<<<======without {...this.props}
    }
  }


  function mapStatetoProps(state) {
    return { someProp: state.someState };
  }

  return connect(mapStateToProps)(ComposedComponent);
};