首页 > 解决方案 > react native 和 redux 中的 hoc 组件?

问题描述

我想在用户请求Api调用时显示微调器,并且我将每个组件传递给更高阶的组件以检查是否请求显示微调器,否则不

但在这里我得到一个错误,说不能将类调用为函数

//-------------Hoc Component

HOC=component=>class extends React.component{

  render(){
    (return <component {...props} {...state}/>)}
  }
}

export default connect(mapStateToProps)(HOC)

//----------login component

export default HOC(connect(mapStateToProps,{actions})(Login))

如果没有 HOC,它可以正常工作,但 HOC 会出错。请让我知道如何连接两个高阶组件的解决方案

标签: javascriptreactjsnative

解决方案


试试这个代码

const HOC = WrappedComponent => {
  class abc extends Component {
    render () {
      return (
        <WrappedComponent {...this.props} {...this.state} />
      );
    }
  }

  const mapStateToProps = state => ({ state });

  const mapDispatchToProps = dispatch => bindActionCreaters({..actions}, dispatch);
  return connect(mapStateToProps, mapDispatchToProps)(abc);
}

export default compose(
  HOC,
  connect(mapStateToProps)
)(Login);

推荐阅读