使用react高阶组件报错Cannot call a class as a function

Question

import React, { Component } from 'react';
import simpleHoc from './components/simple-hoc';

class Usual extends Component {
    render() {
        console.log(this.props, 'props');
        return (
            <div>
                Usual
            </div>
        )
    }
}
export default simpleHoc(Usual);

import React, { Component } from 'react';

const simpleHocWrapped = WrappedComponent => {
    console.log('simpleHoc');
    return class extends Component {
        render() {
            return <WrappedComponent {...this.props}/>
        }
    }
}

class simpleHoc extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mapPoint: [],
            area: [],
            bar: []
        };
    }

    render() {

        return (
            <simpleHocWrapped />
        )
    }
}


export default simpleHoc;

Answer 1

报错中说，不能把类作为一个函数，所以你的输出应该是一个函数才对吧，你现在输出的是一个类。
即

export default function simpleHocWrapped (WrappedComponent) {
   return class extends Component {
    render() {
        return <WrappedComponent {...this.props}/>
        }
    }
}

大概这样

Answer 2

<simpleHocWrapped />

const Test=simpleHocWrapped(Simple)

....
render(){
return <Test />
}

react组件首字母大写 高阶组件是为了返回一个组件

Answer 3

import React, { Component } from 'react';

function simpleHoc(WrappedComponent) {
    return class extends Component {

        constructor(props) {
            super(props);
            this.state = {
                mapPoint: [],
                area: [],
                bar: []
            };
        }

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

export default simpleHoc;