javascript - 扩展 'Component'；未捕获的 TypeError : Super expression must either be null or a function, 不是对象

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

SearchBar.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
    }
}

SearchBar.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

我想延长Component并始终使用我的组件，即 bindReactMethods回调是可选的。

Answer 1

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

它还允许常规 super ，例如

constructor(props) {
            super(props);