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 hebt
  • Editor hebt
  • EditorDraft macht und Halterungen
  • Editor 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.
Schreibe einen Kommentar