リアクションコンポジション対継承

Question

だから、私は相続と対戦の話し合いを全面的に行っていました。私の使用事例についてお話します。

私はreactを使用してコンポーネントの階層を作成しています。ボタン - > buttonBarのようなもの。このようなことをするために、buttonBarコンポーネントにあるように、ボタンコンポーネントで定義した機能が何であれ必要です。

class Button extends React.Component { 
    shouldComponentUpdate() { 
     //do some prevalidation 
     return result; 
    } 

    myButtonfn =() => { 
     //do Something here 
    } 

    myButtonfn2 =() => { 
     //doSomething else 
    } 
} 

class ButtonBar extends Button { 
    shouldComponentUpdate() { 
     return myLogic && super.shouldComponentUpdate.call(this); 
    } 

    myButtonBarfn =() => { 
     //I should be able to do this 
     this.myButtonfn(); 
     this.myButtonfn2(); 
    } 
} 

現在、私はこれを実現するために継承を実装しています。これについて正しい方法は何ですか？私はこれを使用してes5の方法に戻って行きたくありません。 React.createClass。

コンポーネント内の関数の使用方法。

class Button extends React.Component { 
    shouldComponentUpdate() { 
     //do some prevalidation 
     return result; 
    } 

    myButtonfn =() => { 
     //do Something here 
    } 

    myButtonfn2 =() => { 
     //doSomething else 
    } 
} 

class ButtonBar extends React.Component { 
    doSomething =() => { 
     this.refs.abcd.myButtonfn();//To be able to do this, HOC doesn't work 
    } 
    render =() => { 
     return (<Button ref="abcd"/>); 
    } 
} 

Answer 1

EDIT： だから、ちょうどまさに私の答えのように見えるあなたの答えを編集しました。これは、現在のそれを使用する方法です。

---

もしあなたがボタンと呼ばれるクラスを作成することができれば、あなたのbuttonBarはボタンのすべての機能を持つようにボタンを拡張することができます。 - https://facebook.github.io/react/docs/higher-order-components.htmlとあなたの機能を伝承

class Button { 
    constructor(){ 
    //initialise stuff 
    } 

    doFoo(){ 
    //do foo stuff 
    } 
} 

class ButtonBar extends Button{ 
    constructor(){ 
    //initialise stuff 
    } 

    doBar(){ 
    //do bar stuff 
    } 
} 

let myButtonBar = new ButtonBar(); 
myButtonBar.doFoo(); 

Answer 2

class Button extends React.Component { 
    constructor(props, context){ 
     super(props, context); 
     //set local state 
    } 
    shouldComponentUpdate() { 
     //do some prevalidation 
     return result; 
    } 

    const myButtonfn =() => { 
     //do Something here 
    } 

    const myButtonfn2 =() => { 
     //doSomething else 
    } 
} 

class ButtonBar extends Button { 

    constructor(props, context){ 
     super(props, context); 
     //set local state 
    } 
    shouldComponentUpdate() { 
     // No need to bind if you are call super method in ES6 
     return myLogic && super.shouldComponentUpdate(); 
    } 

    myButtonBarfn =() => { 
     //I should be able to do this 
     super.myButtonfn(); 
     super.myButtonfn2(); 
    } 
}