构建一个高阶组件并将其应用到 redux connect答案

【问题标题】：Building a Higher order Component and applying it to redux connect构建一个高阶组件并将其应用到 redux connect
【发布时间】：2018-03-27 14:32:14
【问题描述】：

请考虑 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);

但是，我收到以下错误：

不能将类作为函数调用。

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

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

【问题讨论】：

你想将你的 HOC 连接到 redux 商店吗？
@TimH 好问题。 Hoc 还应该从 redux 存储中获取数据
我发现嵌套组件很奇怪，是帖子中的错字吗？您想要这样做的方式可能是：const withHocComponent = wrapped => () => (<View> <Wrapped /> </View>); HOC 是一个返回组件的函数。这样，您就有了函数withHocComponent，它返回一个“无状态组件”，但它与一个有状态组件的工作原理相同
@sanders 我试着在下面回答你的问题。
我认为你有一个错字（不确定这是否只是在 SO 或你的实际代码中）你有两次 class HoComponent extends Component。

标签： javascript reactjs react-native redux

【解决方案1】：

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

HOC

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));

【讨论】：

很好的答案，简单易懂
@VnDevil 谢谢。我很感激。

【解决方案2】：

感谢@TimH，我通过将类、mapStateToProps 和 mapDispatchToProps 放入 HOC 中对其进行了一些更改，但当它们在 HOCComponent 中时，我无法使其工作。

const HOC = (WrappedComponent) => {

    class HOCComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                talking: false
            };
        }
        render() {
            return (<WrappedComponent speak={this.speak} />);
        }
    }


    const mapStateToProps = state => ({
        start: state.lessonStartReducer.start,
    });


    const mapDispatchToProps = dispatch => ({
        startLesson: (payload) => {
            dispatch(startLesson(payload));
        },
    });


    return connect(
        mapStateToProps,
        mapDispatchToProps
    )(HOCComponent);
}
export default HOC;

【讨论】：