扩展React.js组件
扩展React.js组件
提问于 2014-09-08 16:59:07
关于Backbone.js，我最欣赏的一件事就是简单而优雅的继承方式。我开始掌握React，但在react中找不到任何与这个主干代码相似的东西
var Vehicle = Backbone.View.extend({
methodA: function() { // ... }
methodB: function() { // ... }
methodC: function() { // ... }
});
var Airplane = Vehicle.extend({
methodC: function() {
// Overwrite methodC from super
}
});在react we 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
}
});这比一遍又一遍地定义相同的东西更少重复，但它似乎没有主干方式那么灵活。例如，如果我试图重新定义/重写存在于我的某个mixins中的一个方法，我会得到一个错误。最重要的是，React.js方式是我要编写的更多代码。
react中有一些非常聪明的东西，我觉得这更像是我不知道如何正确地做这件事，而不是感觉React中缺少了一个功能。
任何指针都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2016-08-29 09:45:52
如果您使用在项目中设置webpack+babel+react NPM包，那么在ES6 OOP实现中应该像这样简单：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class BaseComponentClass extends Component {
componentDidMount() {}
render() { return (<div>Base Component</div>) }
}
class InheritedComponentClass extends BaseComponentClass {
// componentDidMount is inherited
render() { return (<div>Inherited Component</div>) } // render is overridden
}
ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>,
document.getElementById('InheritedComponentClassHolder'));注意:这是一个简单的初学者工具包，设置如下：https://github.com/alicoding/react-webpack-babel
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25720595
复制相关文章
相似问题