HINWEIS: Dieser Weg ist nicht perfekt. Noch mehr ist es eher antipattern als Muster. Der Grund, warum ich es hier veröffentliche, ist, dass es gut für mich funktioniert und ich mag die Art, wie ich Modale hinzufügen kann (ich kann modal zu jeder Seite hinzufügen und ihre Komponenten hängen im Allgemeinen nicht von der anderen App ab. Und ich bleibe nett URLs statt hässlich ?modal=login-form). Aber sei bereit, Probleme zu bekommen, bevor du alles funktionstüchtig findest. Denke nochmal nach!
Betrachten wir Sie URLs sollen folgende:
Sie Login nicht wollen abhängig von Users in, sagen Sie, Hinzufügen von Login-Modal zu anderen Seiten ohne Schmerzen.
Nehmen wir an, Sie haben eine Wurzelkomponente, die auf anderen Komponenten steht. Zum Beispiel Usersrender kann wie folgt aussehen:
render() {
return (
<Layout>
<UsersList />
</Layout>
);
}
Und Layout ‚s render etwas wie folgt aussehen:
render() {
return (
<div className="page-wrapper">
<Header />
<Content>
{this.props.children}
</Content>
<Footer />
</div>
);
}
Der Trick ist modal der Injektion zu <Layout /> jedes Mal, wenn wir es brauchen zu erzwingen.
Der einfachste Weg ist, Flussmittel dafür zu verwenden. Ich benutze Redux und habe ui Reducer für solche Seite Meta-Informationen, können Sie ui Store erstellen, wenn Sie andere Fluss-Implementierung verwenden. Wie auch immer, Endziel ist es, modal zu rendern, wenn <Layout />s Zustand (oder sogar bessere Requisiten) modal enthält, die einer Zeichenfolge entsprechen, die den modalen Namen darstellt.Etwas wie:
render() {
return (
<div className="page-wrapper">
<Header />
<Content>
{this.props.children}
</Content>
{this.props.modal ?
<Modal key={this.props.modal} /> :
null
}
<Footer />
</div>
);
}
<Modal /> kehrt modale Komponente auf bestimmten Schlüssel hängt (Bei unserer login-form Schlüssel wollen wir <Login /> Komponente empfangen).
Okay, gehen wir zum Router. Berücksichtigen Sie das folgende Code-Snippet.
const modal = (key) => {
return class extends React.Component {
static displayName = "ModalWrapper";
componentWillMount() {
// this is redux code that adds modal to ui store. Replace it with your's flux
store.dispatch(uiActions.setModal(key));
}
componentWillUnmount() {
store.dispatch(uiActions.unsetModal());
}
render() {
return (
<div className="Next">{this.props.children}</div>
);
}
}
};
...
<Route path="users" component={Next}>
<IndexRoute component={Users}>
<Route path="login" component={modal('login-form')}>
<IndexRoute component={Users} />
</Route>
</Route>
(Sie kümmern uns um nicht Next - ich es hier der Einfachheit halber hinzufügen Stellen Sie sich this.props.children einfach macht.)
modal() Funktion zurück Komponente reagieren, die Änderung in ui Speicher auslöst. Sobald der Router also /users/login erhält, fügt er login-form zu ui hinzu, speichert ihn als prop (oder state) <Layout /> und rendert <Modal />, was für den gegebenen modalen Schlüssel entspricht.
Sie können direkt auf 'params' und' pathname' zugreifen, indem Sie 'this.props.params' verwenden, und vielleicht direkt auf diese verweisen, um die Modale zu verwalten. – Kujira