У меня небольшой эксперимент с кодом — текстовый редактор на основе React с компонентом {amp}lt;TextEditor /{amp}gt; который сохраняет свой текст и другую информацию в состоянии. Когда пользователь нажимает сочетание клавиш для «разделенного редактора», я заменяю его следующим элементом:

 {amp}lt;Split left={this.editors[0]} right={this.editors[1]} /{amp}gt; 

Где редакторы — это массив, подобный this.editors = [{amp}lt;TextEditor /{amp}gt;, {amp}lt;TextEditor /{amp}gt;] установленный в конструкторе родительского элемента {amp}lt;App /{amp}gt; .

Однако при переключении с рендеринга this.editors[0] на разделение с this.editors[0] в качестве левого элемента редактор теряет состояние (очищает его текст), даже если фактический рендеринг JSX, который я выполняю, происходит из того же самого элемент в массиве.

Как я могу переместить элемент React вглубь иерархии без потери состояния?

Фактический код для рендеринга приложения выглядит так:

 import React, { Component, Fragment } from 'react' import Split from './Components/Split' import TextEditor from './Components/TextEditor' class App extends Component { constructor (props) { super(props) this.state = { editorPanes: 0 } this.openNewPanel = this.openNewPanel.bind(this) this.editors = [{amp}lt;TextEditor openNewPanel={this.openNewPanel} /{amp}gt;] } getJSXForPane (p) { if (typeof p === 'number') { return this.editors[p] } else { return ( {amp}lt;Split vertical={p.vertical} left={this.getJSXForPane(p.left)} right={this.getJSXForPane(p.right)} /{amp}gt; ) } } openNewPanel () { const newEditorId = this.editors.length this.editors.push({amp}lt;TextEditor openNewPanel={this.openNewPanel} /{amp}gt;) this.setState({ editorPanes: { vertical: true, left: this.state.editorPanes, right: newEditorId } }) } render () { return ( {amp}lt;Fragment{amp}gt; {this.getJSXForPane(this.state.editorPanes)} {amp}lt;/Fragment{amp}gt; ) } }