在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 使用react高階組件報錯Cannot call a class as a fu

使用react高階組件報錯Cannot call a class as a function

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;

圖片描述

回答
編輯回答
清夢

<simpleHocWrapped />

const Test=simpleHocWrapped(Simple)

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

react組件首字母大寫 高階組件是為了返回一個組件

2017年9月24日 09:42
編輯回答
愛是癌

報錯中說，不能把類作為一個函數(shù)，所以你的輸出應(yīng)該是一個函數(shù)才對吧，你現(xiàn)在輸出的是一個類。
即

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

大概這樣

2018年7月2日 06:56
編輯回答
話寡
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;
2017年8月26日 07:45