开发者问题收集

扩展“组件”;未捕获的类型错误:超级表达式必须为空或函数,而不是对象[重复]

2017-06-04
1246

我正在尝试扩展 React Component 以实现我不喜欢一遍又一遍做的事情,即 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 回调是可选的。

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);
codyc4321
2017-06-04

在 ReactJS 中你应该使用 Composition 而不是 Inheritance。

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. Link to docs

Tukan
2017-06-04