Reagieren: Ist es in Ordnung, eine Komponente durch die Requisiten an eine andere Komponente zu übergeben?

Question

Wenn ich eine Komponente, zum Beispiel <Foo />, die so etwas wie dies macht:

<div> 
    <Bar /> 
    {/* ... */} 
</div> 

Wäre es möglich, Bar als eine Eigenschaft von Foo passieren? <Foo Bar={Bar}/>. So kann ich Referenz Bar während des Rendern von Foo:

render() { 
    const Bar = this.props.Bar; 
    return (
    <div> 
     <Bar /> 
     {/* ... */} 
    </div> 
); 
} 

Ich weiß nicht, ob dies eine gute Idee, um ehrlich zu sein wäre, nur zu überprüfen, ob jemand weiß besser als ich.

Der Grund, warum ich so etwas tun möchte, ist, weil ich eine Komponente testen möchte und darüber nachdenke, wie man gefälschte Abhängigkeiten in die Komponente injiziert. Für ein Projekt habe ich über die Verwendung von Preact nachgedacht, was nicht mit seichtem Rendern funktioniert, daher dachte ich darüber nach, vielleicht eine Art Abhängigkeitsinjektion durchzuführen.

Das Durchlaufen der Komponenten, die die Komponente verwendet, würde es mir erlauben, sie während des Testens zu fälschen, indem sie Mocks passieren.

Ist das eine gute Idee? Oder nicht wirklich der Weg zu gehen? ...

Answer 1

Ich weiß nicht, warum es eine schlechte Idee sein könnte.

Wenn Sie bauen eine Komponente Reaktion, Gebäude sind Sie ein Javascript Objekt mit einer gewissen Syntax (JSX), die auf Ebene Javascript übersetzt wird. So eine React Komponente zu übergeben ist wie die Javascript Objekt.

Für Informationen, das ist die Art react-router verwenden, um Komponente in Route zu übergeben.