ich eine App Komponente haben, die zu einem redux Speicher verbunden ist:Reagieren Router mit Redux: Pass nur notwendig, Requisiten nach unten auf das Kind Ebene Routen
import React from 'react'
import { connect } from 'react-redux'
function App(props) {
return (
<div>
{props.children}
</div>
);
}
function mapStateToProps(state) {
return {
todos: state.something
}
}
export default connect(mapStateToProps)(App)
App ist die Root-Ebene Komponente in meinem Router Hierarchie reagieren und so empfängt alle Kinder Routen wie Kinder:
export default(
<Route component={App} path="/">
<IndexRoute component={Home} />
<Route component={PageNotFound} path="*" />
</Route>
);
ich die Requisiten in der Lage sein wollen, zu übergeben, um App
über mapStateToProps
zu geordneten Komponenten übergeben werden. Es scheint der akzeptierte Weg dies zu tun ist, zu verwenden, um Requisiten an Kinder übergeben zu können (How to pass props to {this.props.children}). So ist der Code in dem ersten Schnipsel oben:
<div>
{props.children}
</div>
wird:
<div>
{React.cloneElement(props.children, { ...props }
</div>
ich das ziemlich hässlich finden, weil es bedeutet, dass ich blind alle Requisiten aus meiner angeschlossenen App Komponente in meine Kindern Route Komponenten am Übergang .
Ist das wirklich der akzeptierte Weg, dies zu tun?
Ich frage mich, ob das vielleicht ein Ansatz ist, der verwendet wird? http://stackoverflow.com/questions/36730619/unable-to-pass-redux-store-beyond-react-router/39300618#39300618 –
Wenn Sie nicht wollen, dass alle Requisiten "blind" weitergegeben werden, können Sie sich verbinden 'your' Home' oder andere Komponenten, wie Sie es mit Ihrer 'App'-Komponente gemacht haben und haben jeweils eine andere 'mapStateToProps'-Funktion. –
@MarioTacke danke. Macht Sinn. –