扩展“组件”；未捕获的TypeError:超级表达式必须为null或函数，而不是对象[duplicate]

Question

我正在尝试为我不喜欢反复做的事情扩展React组件，this.onInputChange=this.onInputChange.bind（this） 要求。到目前为止，我已经尝试：

MyComponent.js-

import React, { Component } from 'react';


// function bindReactMethod(this_value, method_name) {
//     // Bind all of your custom methods, like:
//     //   this.onInputChange = this.onInputChange.bind(this);
//     this_value[method_name] = this_value[method_name].bind(this_value)
// }


// https://stackoverflow.com/questions/15192722/javascript-extending-class
class MyComponent extends Component {

    constructor(props) {
        super(props);
        this.bindReactMethods = this.bindReactMethods.bind(this)
    }

    bindReactMethods(this_value, method_name) {
        // Bind all of your custom methods, like:
        //   this.onInputChange = this.onInputChange.bind(this);
        this_value[method_name] = this_value[method_name].bind(this_value)
    }
}

搜索Bar.js-

import React from 'react';
import MyComponent from '../utils/MyComponent';


export default class SearchBar extends MyComponent {

    constructor(props) {
        super(props);
        this.state = {term: ''};
        this.bindReactMethods(['onInputChange'])
    }

    onInputChange(event) {
        console.log(event.target.value);
        this.setState({term: event.target.value})
    }

失败于

Uncaught TypeError: Super expression must either be null or a function, not object

和

MyComponent.js-

import React, { Component } from 'react';


function bindReactMethod(this_value, method_name) {
    // Bind all of your custom methods, like:
    //   this.onInputChange = this.onInputChange.bind(this);
    this_value[method_name] = this_value[method_name].bind(this_value)
}


// https://stackoverflow.com/questions/15192722/javascript-extending-class
class MyComponent extends Component {

    constructor(props, custom_methods=[]) {
        super(props);
        try {
            custom_methods.map((method_name) => {
                bindReactMethod(this, method_name)
            });
        }
        catch (error) { } // ignore error because that means the user didnt have custom methods to bind
    }
}

搜索Bar.js-

import React from 'react';
import MyComponent from '../utils/MyComponent';


export default class SearchBar extends MyComponent {

    constructor(props) {
        super(props, ['onInputChange']);
        this.state = {term: ''};
    }

    onInputChange(event) {
        console.log(event.target.value);
        this.setState({term: event.target.value})
    }

也失败了

Uncaught TypeError: Super expression must either be null or a function, not object

我想扩展组件并始终使用我的组件，此方法回调是可选的。




Answer 1

在ReactJS中，您应该使用组合而不是继承。

React有一个强大的组合模型，我们建议使用组合而不是继承在组件之间重用代码。链接到文档

Answer 2

MyComponent只是没有导出，代码的工作原理如下：

import React, { Component } from 'react';


function bindReactMethod(this_value, method_name) {
    // Bind all of your custom methods, like:
    //   this.onInputChange = this.onInputChange.bind(this);
    this_value[method_name] = this_value[method_name].bind(this_value)
}


// https://stackoverflow.com/questions/15192722/javascript-extending-class
export default class MyComponent extends Component {

    constructor(props, custom_methods=[]) {
        super(props);
        try {
            custom_methods.map((method_name) => {
                bindReactMethod(this, method_name)
            });
        }
        catch (error) { } // ignore error because that means the user didnt have custom methods to bind
    }
}

和

import React from 'react';
import MyComponent from '../utils/MyComponent';


export default class SearchBar extends MyComponent {

    constructor(props) {
        super(props, ['onInputChange']);
        this.state = {term: ''};
    }

    onInputChange(event) {
        console.log(event.target.value);
        this.setState({term: event.target.value})
    }

它还允许普通的超级，比如

constructor(props) {
            super(props);