扩展React.js组件

Question

我最欣赏Backbone.js的一件事是简单而优雅的继承是如何工作的。我开始着手处理React，并且在React中无法真正找到类似于此Backbone代码的任何内容

var Vehicle = Backbone.View.extend({
    methodA: function() { // ... }
    methodB: function() { // ... }
    methodC: function() { // ... }
});

var Airplane = Vehicle.extend({
    methodC: function() {
        // Overwrite methodC from super
    }
});

在react中，我们有mixin，如果使用mixin，我们可以像上面的例子那样有点接近

var vehicleMethods = {
    methodA: function() { // ... }
    methodB: function() { // ... }
}

var Vehicle = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() { 
        // Define method C for vehicle
    }
});

var Airplane = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() {
        // Define method C again for airplane
    }
});

与一遍又一遍地定义相同的东西相比，这没有那么重复，但是它似乎不像Backbone那样灵活。例如，如果我尝试重新定义/覆盖存在于我的一个混合中的方法，则会收到错误消息。最重要的是，React.js方法为我编写了更多代码。

React中有一些非常聪明的东西，感觉更多的是我没有正确地做到这一点，而不是像React缺少的功能那样。

任何指针，不胜感激。

Answer 1

要获得类似于继承的内容（实际上是注释中指出的 组成
），可以Airplane在示例中将本身包装为Vehicle。如果要Vehicle在Airplane组件中公开方法，则可以使用ref并将它们一对一连接。这并不完全是继承（实际上是 composition
），尤其是因为this.refs.vehicle在组件安装之后才能访问。

var Vehicle = React.createClass({
    ...
});

var Airplane = React.createClass({
    methodA: function() {
      if (this.refs != null) return this.refs.vehicle.methodA();
    },
    ...
    render: function() {
        return (
            <Vehicle ref="vehicle">
                <h1>J/K I'm an airplane</h1>
            </Vehicle>
        );
    }
});

另外值得一提的是，在React官方文档中，他们更喜欢组合而不是继承：

那么继承呢？在Facebook，我们在成千上万的组件中使用React，但还没有发现建议创建组件继承层次结构的用例。

道具和组合为您提供了以显式且安全的方式自定义组件外观和行为所需的所有灵活性。请记住，组件可以接受任意道具，包括原始值，React元素或函数。

如果要在组件之间重用非UI功能，建议将其提取到单独的JavaScript模块中。组件可以导入它并使用该函数，对象或类，而无需对其进行扩展。

值得一提的另一件事是，使用ES2015 / ES6 +，您还可以将对象道具从Airplane组件传播到Vehicle组件

render: function() {
    return (
        <Vehicle {...this.props}>
            <h1>J/K I'm an airplane</h1>
        </Vehicle>
    );
}