鍍金池/ 問答/HTML/ 使用react高階組件報(bào)錯(cuò)Cannot call a class as a fu

使用react高階組件報(bào)錯(cuò)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;

圖片描述

回答
編輯回答
清夢(mèng)

<simpleHocWrapped />

const Test=simpleHocWrapped(Simple)

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

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

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

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

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