'コンポーネント'を拡張します。 Uncaught TypeError：スーパー式はヌルかオブジェクトではなく関数でなければなりません

Question

私は何度も何度も何度も何度も何度も何度も何度も何度もやり続けていることに対して、リアクションコンポーネントを拡張しようとしています。これまで私が試してみました：

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

も、私はこのbindReactMethodsコールバックはオプションであることと、Componentを拡張し、常に私のコンポーネントを使用したい

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

に失敗しました。

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