React: wie auf Basisklasse von Komponenten höherer Ordnung zugreifen

Question

So habe ich eine BaseComponent.jsx, die ich auf viele meiner Komponenten erweitern. Das funktioniert großartig.

class BaseComponent extends React.Component { 
    constructor(props){ 
     super(props) 
     this.something = true 
    } 
} 

class OtherComponent extends BaseComponent { 
    constructor(props){ 
     super(props) 
     console.log(this.something) // true 
    } 
} 

Aber jetzt brauche ich withRouter(component) von react-router zu verwenden, die Ihre Komponente in einer höheren Ordnung Komponente wickelt und schmücken Ihre Klasse. So

ich dies tun:

class OtherComponent extends BaseComponent { 
    constructor(props){ 
     super(props) 
     console.log(this.something) // undefined 
    } 
} 

export default withRouter(OtherComponent) 

Das Problem ist, dass ich jetzt nicht die Eigenschaften von BaseComponent zugreifen können und diejenigen zurückkehren undefined.

Wie kann ich das lösen, damit ich ein HoC erstellen und gleichzeitig auf die Eigenschaften der Basisklasse zugreifen kann?

Answer 1

Die Erweiterung von React-Komponenten wird vom React-Team nicht empfohlen. Selbst wenn es in einigen Fällen funktioniert, sind die Ergebnisse unvorhersehbar, wenn man zähere Dinge wie Komponenten höherer Ordnung durchführt.

Allgemein erweiterbare Komponentenklassen sollten vermieden werden, und selbst wenn sie verwendet werden, sollten sie nicht für "intelligente" verbundene Komponenten verwendet werden - bevorzugen Sie Zusammensetzung statt Vererbung für React-Komponenten.

Und

Sie können keine generische HoC implementieren, die eine Komponente aus dem einfachen Grund, dass sich die HoC mit allen drei Formen der React Komponentendeklaration zu arbeiten hat.

Quelle: https://github.com/reactjs/react-router/issues/3514

So ist die Antwort auf meine Frage ist nur, dass es nicht getan werden kann, und ich sollte statt Vererbung Komposition bewegen.