扩展 React.js 组件

我最欣赏 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
    }
});

在反应中我们有混入 http://facebook.github.io/react/docs/reusable-components.html#mixins，如果我们像这样使用它们，我们可以得到一些接近上面的例子

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 方式那么灵活。例如，如果我尝试重新定义/覆盖我的 mixin 之一中存在的方法，则会收到错误。最重要的是，React.js 方式让我可以编写更多代码。

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

非常感谢任何指点。

获得类似于继承的东西（实际上作品正如评论中指出的），你可以做一个Airplane在你的例子中将自己包裹在一个Vehicle。如果你想公开方法Vehicle in the Airplane组件，您可以使用ref https://facebook.github.io/react/docs/more-about-refs.html并将它们一一连接起来。这并不完全是继承（实际上是作品），特别是因为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 官方文档 https://facebook.github.io/react/docs/composition-vs-inheritance.html他们更喜欢组合而不是继承：

那么继承又如何呢？在 Facebook，我们在数以千计的场合使用 React 组件，并且我们还没有发现任何我们可以使用的用例 建议创建组件继承层次结构。

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

如果您想在组件之间重用非 UI 功能，我们 建议将其提取到单独的 JavaScript 模块中。这 组件可以导入它并使用该函数、对象或类， 而不扩展它。

另一件值得一提的是，使用 ES2015/ES6+ 你还可以从Airplane组件到Vehicle成分

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