Reactjs 组合与继承

所以我到处都在讨论继承和组合。我将讨论我的用例

我正在使用react创建组件的层次结构。比如button->buttonBar。所以对于这类事情，无论我在button组件中定义了什么功能，都需要像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"/>);
    }
}

class按钮扩展React.Component{
shouldComponentUpdate（）{
//做一些预验证
返回结果；
}
myButtonfn=（）=>{
//在这里做点什么
}
myButtonfn2=（）=>{
//还有别的吗
}
}
类ButtonBar扩展了React.Component{
doSomething=（）=>{
this.refs.abcd.myButtonfn（）；//要做到这一点，HOC不起作用
}
渲染=（）=>{
返回（）；
}
}

编辑： 所以你刚刚编辑了你的答案，看起来和我的答案一模一样。这应该是当前使用它的方式

---

如果您可以使用es6，那么您可以创建一个名为button的类，并且您的buttonBar可以扩展button以拥有button的所有功能

像这样：

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

---

看一看高阶组件——并将函数向下传递为props@TMitchell只是想一想，你不觉得HOC想要的东西有点太多了吗？@TahnikMustasin在什么意义上太多了？@TMitchell我猜他的纽扣杆是一种纽扣。所以他的纽扣杆继承了纽扣，这很有道理。他当然可以使用HOC，但如果继承是完全合理的，那么为什么要使用HOC呢？这只是我的想法。@AftabKhan在这种情况下，我想你已经回答了你自己的问题“正确的方法是什么？”和“我有一种神秘的使用React的方法，大多数人都不会同意”这种类型的示例工作，因为它们只是ES6类，但是当涉及到作者所描述的React组件时又如何呢。您不能继承这样的React组件（没有ReactOO这样的第三方库）。选项是组合/高阶组件。我提到过“如果可以使用es6”。此外，从他后来的编辑看来，他确实在使用ES6。我所说的“仅ES6类”是指它们不是React组件。我不相信您可以通过这种方式扩展React组件，使其以您期望的方式运行。我对所有组件都使用es6。但是对于es6继承，除了babel中的构造函数之外，在任何其他函数中执行super时都会抛出错误@塔尼克穆斯塔辛。我编写的编辑过的示例表明它不起作用。@TMitchell我能够扩展React.Component，并使用该扩展类创建我的测试示例。它起作用了。这并不是说它不起作用。但我想知道这样做是否正确。另外，如果有更好的选择

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