我知道我的问题有点偏颇,但我对 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
which 基本上完全相同,但<input/>
在return
其render
功能内部增加了一个。
我也有Component3
,它共享相同的功能,但具有不同的render()
功能。
那么如何在这里应用继承并避免复制粘贴3次呢?我只是想念一些实用的插图,所以我很感激。
Edit1__________________________________________________所以我尝试按照第一个答案实现Prototype继承,但React似乎没有看到这些函数:getInitialState()
为空,渲染后初始状态为空。这种方法有什么问题?
我也试着按照教科书去做,做了:
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 既不支持 mixins 也不支持原型。应该使用组合来代替。这篇文章对此进行了解释: Dan Abramov 的文章 Mixins Are Dead。万岁组合