Реагировать и наследовать ES6
Замечания: Это сообщение было опубликовано в то время, когда React НЕ поддерживал ES6 (v12).
У меня есть класс ES6:
class BaseClass {
getInitialState(){
return {message: 'Hello!'};
}
render() {
return (
<div>
<div>{this.state.message}</div>
</div>
)
}
}
Это я могу экспортировать в ES6, используя это выражение (источник:реагировать ES6 Browserify)
export default React.createClass(BaseClass.prototype)
Это отлично работает. Теперь я хотел бы использовать наследование ES6, чтобы расширитьBaseClass
учебный класс :
class ExtendedClass extends BaseClass{
getInitialState(){
return {message: "Hello! I'm an extension"};
}
}
Но когда я звонюReact.createClass
наExtendedClass
класс, я получил следующее исключение:
Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.
Я знаю, что React 0.13 должен быть более дружественным к ES6, но есть ли способы справиться с этим?
РЕДАКТИРОВАТЬ:
Я использую Traceur для компиляции своих классов ES6. Выход дляExtendedClass
похоже :
function ExtendedClass() {
"use strict";
if (BaseClass !== null) {
BaseClass.apply(this, arguments);
}
}
for (BaseClass____Key in BaseClass) {
if (BaseClass.hasOwnProperty(BaseClass____Key)) {
ExtendedClass[BaseClass____Key] = BaseClass[BaseClass____Key];
}
}
____SuperProtoOfBaseClass = BaseClass === null ? null : BaseClass.prototype;
ExtendedClass.prototype = Object.create(____SuperProtoOfBaseClass);
ExtendedClass.prototype.constructor = ExtendedClass;
ExtendedClass.__superConstructor__ = BaseClass;
ExtendedClass.prototype.getInitialState = function() {
"use strict";
return {message: "Hello! I'm an extension"};
};
React.createClass(ExtendedClass.prototype);