Empfohlene Methode, um die Anfrage von nodeJs zu übernehmen Objekt in ReactJS

Question

Was ist der beste Weg, um ein komplexes Objekt oder eine komplexe Klasse auf jede ReactJS-Komponente zu erben?

Wie in ihrer Dokumentation beschrieben, ist es nicht empfehlenswert, Kontext zu verwenden, und ich denke, die Verwendung der Requisite wird auch nicht die beste Lösung sein.

Dies ist unser Fall:

Edit: Vielleicht ein besseres Beispiel ist, wenn wir versuchen, das Request-Objekt vom Router in die Stufe 20 der Kinder für SSR Gründen

Wir haben einen Router verwenden, erben das funktioniert auf Client und auch für SSR. Für jede Route, die gerendert wird, benötigen wir auf Client und Server eine generierte Klasse. So sollte eine Lösung wie folgt aussehen:

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.myAwesomeObject = new AwesomeClass({/* some settings */}); 
    } 
    getChildContext() { 
    let { myAwesomeObject } = this; 
    return { 
     myAwesomeObject 
    }; 
    } 
    render(){ 
    return (
     <span><ComponentLevel1 /></span> 
    ); 
    } 
} 

const ComponentLevel1 =() => { 
    return (
    <div> 
     <ComponentLevel2 /> 
    </div> 
); 
}; 
const ComponentLevel2 =() => { 
    return (
    <div> 
     <ComponentLevel3 /> 
    </div> 
); 
}; 
...... 
const ComponentLevel20 = (props) => { 
    content = this.context.myAwesomeObject.doSomeThingWithProps(props); 
    return (
    <div> 
     {content} 
    </div> 
); 
}; 

In diesem Beispiel bin ich nun in der Lage, die awesomeObject in jeder Komponente zu verwenden, die ich machen werde, aber der Kontext nicht von ReactJS empfohlen: https://facebook.github.io/react/docs/context.html

Also meine Frage Jetzt ist: Was ist der beste Weg, um Klassen wie diese bis auf alle Komponenten zu vererben?

Ich weiß: auf dem Client ist dies kein Problem, weil ich das Objekt einmal erstellen und auf dem Client global verwenden kann, aber auf dem Server (SSR) brauche ich auch Zugriff auf die erstellte Klasse. Und das Objekt jedes Mal neu zu erstellen, wenn ich es in einer anderen Komponente brauche, scheint nicht die beste Lösung zu sein - auch, diese Klasse keiner Komponente als Eigenschaft hinzuzufügen - richtig?

EDIT Ich habe den Code-Schnipsel zu zeigen, bearbeitet, dass es vielleicht ein Fall, wo die 20. Stufe meiner Kinder Zugriff auf die Instanz benötigt. Mit Kontext würde es funktionieren wie in meinem Beispiel, aber ReactJS sagt, dass es nicht empfohlen wird. Also wäre die andere Lösung, die Klasse zu den Eigenschaften meiner Kinder hinzuzufügen - 20 Stufen tiefer - aber ist das wirklich die beste Lösung, um das zu lösen?

Answer 1

Was ist mit Zusammensetzung? (https://facebook.github.io/react/docs/composition-vs-inheritance.html)

class SomeComponent extends React.Component { 
    render() { 
     return(
      <SomeOtherComponent {...this.props} /> 
     ) 
    } 
} 

Durch all die Requisiten vorbei nach unten zu verschiedenen Komponenten (einschließlich es ist Kinder) Sie leicht Kind Bauteilverhalten anpassen können.