延長「組件」;未捕獲的TypeError：超級表達式必須爲null或函數，而不是對象

Question

我試圖擴展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回調是可選的。

Answer 1

在ReactJS中，您應該使用組合而不是繼承。

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

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