Hinweis: Dieser Beitrag wurde zum Zeitpunkt veröffentlicht React war nicht unterstützt ES6 (v12).React und ES6 Vererbung
Ich habe eine ES6 Klasse:
class BaseClass {
getInitialState(){
return {message: 'Hello!'};
}
render() {
return (
<div>
<div>{this.state.message}</div>
</div>
)
}
}
Dass ich in ES6 mit diesem Ausdruck (Quelle: react ES6 browserify) exportieren
export default React.createClass(BaseClass.prototype)
Dies funktioniert gut. Nun würde Ich mag ES6 Erbe verwenden, um meine BaseClass
Klasse zu erweitern:
class ExtendedClass extends BaseClass{
getInitialState(){
return {message: "Hello! I'm an extension"};
}
}
Aber wenn ich React.createClass
auf der ExtendedClass
Klasse aufrufen, bekam ich die folgende Ausnahme:
Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.
Ich weiß, 0,13 Reagieren soll mehr ES6-freundlich sein, aber gibt es irgendwelche Möglichkeiten, damit umzugehen?
EDIT:
ich Traceur bin mit meiner ES6 Klassen zu kompilieren. Die Ausgabe für ExtendedClass
wie folgt aussieht:
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);
getInitialState nicht mit es6 Code verwendet werden soll. Setzen Sie stattdessen Ihren Anfangszustand im Konstruktor 'constructor (requisiten) {super (reps); this.state = {Nachricht: 'Hallo!'}} ' – widged
Dieser Beitrag wurde zum Zeitpunkt veröffentlicht, an dem REACT ES6 (v12) NICHT unterstützte. Es ist nicht mehr relevant. Natürlich funktioniert mit React v13 alles einwandfrei und es ist nicht nötig die erwähnte Workaround zu verwenden. – JBE