Gibt es eine Möglichkeit, eine Komponente in eine andere Reaktionskomponente zu übertragen? Ich möchte eine Modellreaktionskomponente erstellen und eine andere Reaktionskomponente übergeben, um diesen Inhalt zu transklamieren.
Bearbeiten: Hier ist ein ReactJS-Codepen, der veranschaulicht, was ich versuche zu tun. http://codepen.io/aallbrig/pen/bEhjo
HTML
<div id="my-component">
<p>Hi!</p>
</div>
ReactJS
/**@jsx React.DOM*/
var BasicTransclusion = React.createClass({
render: function() {
// Below 'Added title' should be the child content of <p>Hi!</p>
return (
<div>
<p> Added title </p>
{this.props.children}
</div>
)
}
});
React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));
javascript
reactjs
Andrew Allbright
quelle
quelle
this.props.children
ist Teil der Komponenten-API und wird voraussichtlich auf diese Weise verwendet. Die Beispiele des React-Teams verwenden diese Technik, beispielsweise beim Übertragen von Requisiten und beim Sprechen über ein einzelnes Kind .Hinweis versehen ich eine tiefer gehende Antwort hier
Laufzeit-Wrapper:
Es ist der idiomatischste Weg.
Beachten Sie, dass dies
children
eine "spezielle Requisite" in React ist. Das obige Beispiel ist syntaktischer Zucker und entspricht (fast)<Wrapper children={<App/>}/>
Initialisierungs-Wrapper / HOC
Sie können eine Komponente höherer Ordnung ( Higher Order Component, HOC) verwenden. Sie wurden kürzlich zum offiziellen Dokument hinzugefügt .
Dies kann zu (wenig) besseren Leistungen führen, da die Wrapper-Komponente das Rendern mit shouldComponentUpdate einen Schritt vorausschließen kann, während bei einem Laufzeit-Wrapper die untergeordnete Requisite wahrscheinlich immer ein anderes ReactElement ist und ein erneutes Rendern verursacht auch wenn Ihre Komponenten PureComponent erweitern.
Beachten Sie, dass
connect
Redux früher ein Laufzeit-Wrapper war, aber in ein HOC geändert wurde, da es unnötige Renderings vermeiden kann, wenn Sie diepure
Option verwenden (was standardmäßig der Fall ist).Sie sollten während der Renderphase niemals ein HOC aufrufen, da das Erstellen von React-Komponenten teuer sein kann. Sie sollten diese Wrapper lieber bei der Initialisierung aufrufen.
Beachten Sie, dass die HOC-Version bei Verwendung von Funktionskomponenten wie oben keine nützliche Optimierung bietet, da zustandslose Funktionskomponenten nicht implementiert werden
shouldComponentUpdate
Weitere Erklärungen hier: https://stackoverflow.com/a/31564812/82609
quelle
quelle
Facebook empfiehlt die Verwendung zustandsloser Komponenten. Quelle: https://facebook.github.io/react/docs/reusable-components.html
quelle
Sie können es als normale Requisite übergeben:
foo={<ComponentOne />}
Beispielsweise:
quelle
Ich bevorzuge die integrierte React-API:
dann können Sie das Wrapper-Div durch das ersetzen, was Sie wollen:
quelle
Sie können eine Komponente über übergeben. die Requisiten und rendern es mit Interpolation.
Sie würden dann eine
prop
aufgerufenechild
Komponente übergeben, die eine React-Komponente wäre.quelle
this.props.children
wie in einer anderen Antwort vorgeschlagen verwenden, können Sie die Kinder als Kinder anstelle von attrs schreiben.<div child={this.props.child />
.React.DOM.div
Verwendet wie alle Kernkomponenten daschildren
Array. Sehen Sie sich an, wie es in IhrerHello
Komponente verwendet wird. Es werden bereits mehrere untergeordnete Elemente verwendet.Spät im Spiel, aber hier ist ein leistungsstarkes HOC-Muster zum Überschreiben einer Komponente, indem sie als Requisite bereitgestellt wird. Es ist einfach und elegant.
Angenommen, es wird
MyComponent
eine fiktiveA
Komponente gerendert, aber Sie möchtenA
in diesem Beispiel eine benutzerdefinierte Überschreibung von zulassenB
, dieA
ein<div>...</div>
einschließt und auch "!" zur Textstütze:quelle
Ihre Frage ist eigentlich, wie Sie eine Komponente höherer Ordnung (Higher Order Component, HOC) schreiben. Das Hauptziel der Verwendung von HOC besteht darin, das Einfügen von Kopien zu verhindern. Sie können Ihr HOC als rein funktionale Komponente oder als Klasse schreiben. Hier ein Beispiel:
Wenn Sie Ihre übergeordnete Komponente als klassenbasierte Komponente schreiben möchten:
Wenn Sie Ihren Elternteil als Funktionskomponente schreiben möchten:
quelle
Hier ist ein Beispiel eines übergeordneten Liste react Komponente und whos Requisiten enthalten ein Element reagieren. In diesem Fall wird nur eine einzelne Link- Reaktionskomponente übergeben (wie im dom-Rendering dargestellt).
quelle
Ja, Sie können dies mit Requisiten tun. Sie können Daten der Komponente als Objekt wie Requisiten übergeben und dann innerhalb der Komponente eine andere Komponente importieren und dynamisch mit Prpps-Daten binden. Lesen Sie mehr über die Reaktionskomponente
quelle