javascript - 扩展 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 中我们 have 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 方式那么灵活。例如，如果我尝试重新定义/覆盖一个存在于我的混入中的方法，我会得到一个错误。最重要的是，React.js 方式让我可以编写更多代码。

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

非常感谢任何指点。

Answer 1

要获得类似于继承的东西(实际上是 composition，正如评论中指出的那样)，您可以在您的示例中制作一个 Airplane 将自己包装在一个 Vehicle。如果你想在 Airplane 组件中公开 Vehicle 的方法，你可以使用 ref并将它们一一连接起来。这不完全是继承(它实际上是组合)，特别是因为 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 official documentation 中他们更喜欢组合而不是继承:

So What About Inheritance? At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

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

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