我知道我的问题有点偏颇,但我对 Javascript 很陌生并且prototypes
,我读过它,但我真的不明白如何将该技术应用于我的实际问题。所以一个例子会非常有帮助。
所以我有一个React
组件,基本上看起来像这样:
var Component1 = React.createClass({
getInitialState: function () {
return ({
searchable: true,
})
},
function1: function () {
return ({
somevalue
})
},
render: function () {
var redText = {
color: 'red'
};
var redBorder = {
color: 'red',
border: '1px solid red'
};
return (
<form>
<div>
<a onClick={this.props.handleAddClick}>Something</a>
</div>
<div>
<label>Some label</label>
<input type="text"/>
</div>
</form> )
});
我也有Component2
基本上完全相同,但多了一个<input/>
在 - 的里面return
of its render
功能。
我也有Component3
,它们具有相同的功能,但有不同的render()
功能。
那么如何在这里应用继承并避免3次复制粘贴呢?我只是错过了一些实用的插图,所以我会很感激。
编辑1____________________________________________________
所以我尝试按照第一个答案实现原型继承,但 React 似乎没有看到这些函数:getInitialState()
为null,渲染后初始状态为null。这种方法有什么问题吗?
我也试着按照课本去做,并做到了:
function MyPrototype() {};
MyPrototype.prototype.getInitialState = function () {
return ({
someProperty: true;
})
};
function Component1() {};
Component1.prototype = Object.create(MyPrototype.prototype);
Component1.prototype.render = function () {
console.log(this);
return (<div></div>)};
var MyComponent1 = React.createClass(new Component1());
但是当我打开浏览器时,出现错误:Uncaught Invariant Violation: createClass(...): Class specification must implement a
rendermethod.
我这样做错了什么?
编辑2______________________________________________
实际上,我发现 React 既不支持 mixin,也不支持原型。应该使用组合来代替。这篇文章中对此进行了解释:Dan Abramov 的文章 Mixins 已死。作文万岁 https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.gvmtdcnhn