javascript - 构建高阶组件并将其应用于 redux connect

Question

请考虑 React Native 代码:

MyForm.js

Class MyForm extends Component{
   render(){
      //Code Left out for simplicity
   }
} 

function mapStateToProps(){//code left out for simplicity}

MyForm.propTypes = {//code left out for simplicity};
export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));

HoComponent.js

export default withHocComponent = WrappedComponent => class HoComponent extends Component {
    class HocComponent extends Component{
       render(){
         <View>
           <WrappedComponent/>
         </View>
       }
    }
}

function mapStateToProps(state) {
return {
  prop1: state.myReducer.someProp,
 };
}

export default connect(mapStateToProps)(withHocComponent);

但是，我收到以下错误:

Cannot call class as a function.

堆栈指的是这一行:export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));

除了 redux connect 函数之外，我正在尝试实现一个额外的高阶组件。

Answer 1

好的，我希望这就是您要找的。如果你有任何问题随时问。

高级组织

function withHocComponent(WrappedComponent) {
    class Wrapper extends Component {
        render() {
            // here you could pass props to your wrappedComponent
            return <WrappedComponent />;
         }

        const mapStateToProps = (state) => {
           //code left out for simplicity
        }
        //connect your HOC to the store inside the Wrapper 
        return connect(mapStateToProps, {})(Wrapper);
     }
}
export default withHocComponent;

我的表格

Class MyForm extends Component{
   render(){
      //Code Left out for simplicity
   }
} 

function mapStateToProps(){//code left out for simplicity}

MyForm.propTypes = {//code left out for simplicity};

// Here is the part where the magic happens. 
// Pass your HOC your connected component
export default withHocComponent(connect(mapStateToProps, {})(MyForm));