Wie kann ich verhindern, Reagieren, trennen/Zusammenbau eine Komponente?
Ich bin mit react-router
und react-redux
. Ich habe zwei Wege, wie diese:
<Route path='/edit' component={ EditNew } />
<Route path='/edit/:id' component={ EditDraft } />
wo EditNew
und EditDraft
sind Daten-Bereitstellung von Containern, wickeln Sie ein Editor
- Komponente mit dem react-redux
connect
Funktion:
const EditNew = connect(state => ({}))(React.createClass({
render() {
return <Editor />;
}
}));
und
const EditDraft = connect(state => ({ drafts: state.drafts }))(React.createClass({
render() {
const { params, drafts } = this.props;
const draft = findDraft(params.id, drafts);
return <Editor draft={ draft } />;
}
}));
Nun Editor
ist manipuliert, in einer solchen Weise, dass, wenn Sie mit der Eingabe beginnen in einem leeren Editor
, es löst eine history.replaceState()
aus /edit
zu /edit/:id
mit einem ranomly generierte ID. Wenn dies geschieht, bekomme ich die folgende Sequenz von Ereignissen:
EditorNew
hebtEditor
hebtEditorDraft
macht und HalterungenEditor
macht und Halterungen
Wenn ich codiert diese zwei Behältern, dachte ich, dass die Editor
Komponente, die in beiden zu versöhnen, ohne aushängen und aufstecken. Dies ist problematisch für mich aus mehreren Gründen neben der zusätzlichen unnötige Arbeit, chief unter denen sind, die der editor landet, verlieren den Fokus und die richtigen cursor-Bereichs nach dem unmount und remount.
Ohne Erfolg ich habe versucht, die Angabe key
für die Editor
Komponente zur Andeutung der Versöhnung-system, dass es die gleiche Komponente, und ich habe versucht shouldComponentUpdate
, aber nicht genannt, was Sinn macht, angesichts dessen, was Reagieren tut.
Abgesehen von der Kombination der zwei Container in einem container mit komplizierter render()
Logik, ist es etwas, was ich tun kann, um zu verhindern, dass die Editor
Komponente von aushängen/Montage in der Geschichte den übergang?
- Es klingt wie es funktioniert, wie es soll; ändern Sie die top-level-Komponente, die
Editor
ist ein Kind, so sollte es sein völlig zerstört und neu erstellt unter dem neuen Elternteil. - Also ich sollte das Zusammenführen der Behälter eh? Ich bin auf der Suche github.com/rackt/redux-router, aber ich will nicht hinzufügen, mehr Material zu diesem Projekt, bedenkt ich will die Migration auf Staffel bald.
- Ja, das würde ich raten, einen einzigen container, vor allem seit Sie sprechen über die verschiedenen Zustände der gleichen Sache, nicht mit den
Editor
in eine ganz andere Kapazität. - Danke, werde das tun.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Reagieren die Versöhnung des Algorithmus sagt, dass, wenn das element hat eine andere Art (in diesem Fall
EditNew
undEditDraft
), dann Reagieren wird "den Abriss der alten Struktur und den Aufbau der neuen Struktur von Grund auf."Um dies zu verhindern, müssen Sie die Verwendung des gleichen Bauteils für beide Routen.
Können Sie
shouldComponentUpdate
und, wenn die route wurde geändert von/edit
zu/edit/:id
(Sie können dies überprüfen, immer den router info vom Staat angeschlossen, um Ihre Komponente) return false, so wird es nicht aktualisieren Sie die Komponente.Sind die Chancen, dass dies ist nicht möglich, mit
react-router
<= v3.Mit
react-router
v4, sollte dies jetzt möglich: https://github.com/ReactTraining/react-router/issues/4578