Ich habe die folgende Struktur für meine React.js-Anwendung mit React Router :
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var Index = React.createClass({
render: function () {
return (
<div>
<header>Some header</header>
<RouteHandler />
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
Ich möchte einige Eigenschaften an die Comments
Komponente übergeben.
(Normalerweise würde ich das gerne machen <Comments myprop="value" />
)
Was ist der einfachste und richtige Weg, dies mit React Router zu tun?
javascript
properties
reactjs
react-router
Kosmetika
quelle
quelle
<ComponentA x={<ComponentB y={<ComponentC z={} />} />} />
OR<ComponentA x={ComponentB(ComponentC()) } />
Andernfalls treten diese Probleme von Kombinationen von Abstraktionen erneut auf und erfordern einige weniger als optimale und indirekte Lösungen, die als Problemumgehungen wie Wrapping usw. bezeichnet werden. Abstraktionen müssen erstklassige Bürger als Grundelemente sein, unabhängig davon, was die Wahrnehmung der ersten Klasse bedeutet.Antworten:
AKTUALISIEREN
Seit der neuen Version ist es möglich, Requisiten
Route
ohne Verwendung eines Wrappers direkt über die Komponente zu übergeben. Zum Beispiel mitrender
prop .Komponente:
Verwendungszweck:
Code und Box Beispiel
ALTE VERSION
Mein bevorzugter Weg ist das Umschließen der
Comments
Komponente und das Übergeben des Wrappers als Routenhandler.Dies ist Ihr Beispiel mit Änderungen:
quelle
<Route path="comments" component={() => (<Comments myProp="value" />)}/>
Wenn Sie lieber keine Wrapper schreiben möchten, können Sie dies wahrscheinlich tun:
quelle
route
einfaches Objekt in Ihrer Komponente erhalten. Hier ist die Antwort des Github-Problems: github.com/rackt/react-router/issues/615#issuecomment-100432086Kopieren aus den Kommentaren von ciantic in der akzeptierten Antwort:
Dies ist meiner Meinung nach die eleganteste Lösung. Es klappt. Half mir.
quelle
_ref
component={(props) => (<Comments myProp="value" location={ props.location } />)}
aber es wird wieder alles chaotischcomponent={(props) => (<Comments {...props} myProp="value" />)}
die injizierten Requisiten zu pflegenDies ist die Lösung von Rajesh , ohne die unbequemen Kommentare von Yuji und für React Router 4 aktualisierten.
Der Code wäre wie folgt:
Beachten Sie, dass ich
render
anstelle voncomponent
. Der Grund ist, unerwünschtes erneutes Montieren zu vermeiden . Ich übergebe das auchprops
an diese Methode und verwende die gleichen Requisiten für die Comments-Komponente mit dem Object Spread-Operator (ES7-Vorschlag).quelle
Nur eine Fortsetzung von ColChs Antwort. Es ist ziemlich einfach, die Umhüllung einer Komponente zu abstrahieren:
Ich habe diese Lösung noch nicht getestet, daher ist jedes Feedback wichtig.
Es ist wichtig zu beachten, dass bei dieser Methode alle über den Router gesendeten Requisiten (z. B. Parameter) überschrieben / entfernt werden.
quelle
return React.createElement(Component, _.assign({}, this.props, props));
(Dieser verwendet _.assign, um das kombinierte Objekt zu erstellen ... andere Methoden sind natürlich verfügbar).render
,component
undchildren
Methoden fürRoute
. Beachten Sie, dass Sie, wie @dgrcode Antwort hervorhebt ,render
anstelle voncomponent
Sie können Requisiten übergeben, indem Sie sie an
<RouteHandler>
(in v0.13.x) oder an die Route-Komponente selbst in v1.0 übergeben.(Aus dem Upgrade-Handbuch unter https://github.com/rackt/react-router/releases/tag/v1.0.0 )
Alle Kinderbetreuer erhalten die gleichen Requisiten - dies kann je nach den Umständen nützlich sein oder auch nicht.
quelle
React.cloneElement
dass mehrere Elemente übergeben werden, aber die Funktionssignatur scheint nur ein Reaktionselement zu benötigen. Ich denke, dieses Snippet kann leichter verständlich gemacht werden.React.cloneElement(this.props.children, {myprop: "value"})
oderReact.cloneElement(this.props.children, {myprop: this.props.myprop})
etc.Mit ES6 können Sie Komponenten-Wrapper einfach inline machen:
<Route path="/" component={() => <App myProp={someValue}/>} >
Wenn Sie Kinder übergeben müssen:
<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >
quelle
render
anstelle voncomponent
React-Router v4 alpha
Jetzt gibt es einen neuen Weg, dies zu tun, obwohl er der vorherigen Methode sehr ähnlich ist.
PS Dies funktioniert nur in der Alpha-Version und wurde nach der Alpha-Version v4 entfernt. In v4 ist es wieder einmal mit dem Pfad und den genauen Requisiten.
react-lego Eine Beispiel-App enthält Code, der genau dies in routen.js in ihrem Zweig react-router-4 ausführt
quelle
Hier ist die sauberste Lösung, die ich mir ausgedacht habe (React Router v4):
MyComponent
hat nochprops.match
undprops.location
und hatprops.foo === "lol"
.quelle
Wickeln Sie es mit einer zustandslosen Funktionskomponente ein:
quelle
Sie können auch das RouteHandler-Mixin verwenden, um die Wrapper-Komponente zu vermeiden und den Status der Eltern einfacher als Requisiten weiterzugeben:
quelle
Sie können Requisiten
<RouterHandler/>
wie folgt abgeben :Der Nachteil dabei ist, dass Sie wahllos Requisiten übergeben. So
Comments
kann bis Empfangen Requisiten beenden , die wirklich für eine andere Komponente bestimmt sind , je nach Route und Konfiguration. Es ist keine große Sache, daprops
es unveränderlich ist, aber dies kann problematisch sein, wenn zwei verschiedene Komponenten eine Requisite mit dem Namen erwarten,foo
aber mit unterschiedlichen Werten.quelle
{...props}
In 1.0 und 2.0 können Sie mit
createElement
prop ofRouter
angeben, wie genau Ihr Zielelement erstellt werden soll. Dokumentationsquellequelle
Sie können auch es6- und zustandslose Funktionen kombinieren , um ein viel saubereres Ergebnis zu erzielen :
quelle
this.props
eine Funktion, von der ich mir ziemlich sicher bin, dass sie nicht funktioniert. Wenn Sie reine Funktionen verwenden, anstatt die zu erweiternReact.Component
, müssen Sieprops
als Argument übergeben, siehe die React-Dokumente zu Komponenten und RequisitenReagieren Sie auf die Lösung von Router v 4
Ich bin heute früher auf diese Frage gestoßen, und hier ist das Muster, das ich verwende. Hoffentlich ist dies für alle nützlich, die nach einer aktuelleren Lösung suchen.
Ich bin mir nicht sicher, ob dies die beste Lösung ist, aber dies ist mein aktuelles Muster dafür. Ich habe normalerweise ein Core-Verzeichnis, in dem ich meine häufig verwendeten Komponenten mit ihren relevanten Konfigurationen (Loader, Modals usw.) behalte, und ich füge eine Datei wie die folgende hinzu:
Dann mache ich in der fraglichen Datei Folgendes:
Sie werden feststellen, dass ich den Standardexport meiner Komponente als bescheidenen Kamelkoffer importiere, wodurch ich die neue, standortbezogene Komponente in CamelCase benennen kann, damit ich sie normal verwenden kann. Abgesehen von der zusätzlichen Importzeile und der Zuweisungszeile verhält sich die Komponente wie erwartet und empfängt alle ihre Requisiten normal, wobei alle Routenrequisiten hinzugefügt werden. Auf diese Weise kann ich mit this.props.history.push () problemlos von Methoden des Komponentenlebenszyklus umleiten, den Speicherort überprüfen usw.
Hoffe das hilft!
quelle
Für React Router 2.x.
und auf deinen Routen ...
Stellen Sie sicher, dass der 3. Parameter ein Objekt ist wie :
{ checked: false }
.quelle
Das Problem mit dem React Router ist, dass er Ihre Komponenten rendert und Sie so daran hindert, Requisiten einzugeben. Mit dem Navigationsrouter hingegen können Sie Ihre eigenen Komponenten rendern. Das bedeutet, dass Sie nicht durch Reifen springen müssen, um Requisiten wie im folgenden Code und in der dazugehörigen JsFiddle- Show zu übergeben.
quelle
Verwenden Sie die Komponente mit oder ohne Router basierend auf der Antwort von Rajesh Naroth.
Oder Sie könnten es so machen:
quelle
Für den React-Router 2.5.2 ist die Lösung so einfach:
quelle
Mithilfe einer benutzerdefinierten Routenkomponente ist dies in React Router v3 möglich.
Der
<MyRoute>
Komponentencode sollte ungefähr so aussehen:Weitere Informationen zum Ansatz der benutzerdefinierten Routenkomponente finden Sie in meinem Blogbeitrag zum Thema: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html
quelle
Dies ist wahrscheinlich der beste Weg, um React-Router-Dom mit einem Cookie-Handler zu verwenden
in index.js
und verwenden Sie einen CookieCheck
quelle
quelle
Verwenden Sie die oben beschriebene Lösung und dies funktioniert in Version 3.2.5.
oder
quelle