Реагирующая композиция против наследования

Question

Так что я собирался обсудить Наследование и Композицию повсюду. Я расскажу о своем прецеденте.

Я создаю иерархию компонентов, использующих реакцию. Например, кнопка кнопки -> 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: Итак, вы только что отредактировали ваш ответ, который выглядит точно так же, как мой ответ. Это должно использовать текущий способ его использования.

---

Если вы можете использовать ES6, то вы можете создать кнопку класс называется и ваш ButtonBar может продлить кнопку, чтобы все функции кнопки.

Как это:

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