ReactJS: Переместить состояние компонента

Question

Я пытаюсь реализовать приложение с большим диалоговом окном. Часто компонент должен запускать диалог в режиме «огонь-и-забыть», поэтому у меня есть функция create_dialog(), которая принимает элемент React.DOM и добавляет его в массив dialogs в состоянии компонента App (компонент верхнего уровня) который в своей функции render() отображает все диалоги.

Это прост в использовании и прекрасно работает, но теперь я хочу иметь возможность свести к минимуму диалоги и показать небольшой предварительный просмотр в панели задач. Способ, которым я пытался это сделать, - добавить новый массив previews в состояние App s, и при минимизации диалога я удалю его из dialogs и добавлю его в previews, который отображается в другом элементе на странице.

Проблема заключается в том, что элементы React.DOM.* - это просто облегченные ссылки, которые не хранят состояние, поэтому при минимизации диалогов все состояние теряется, потому что компоненты диалога должны быть перемонтированы (и насколько я знаю, нет никакого способа действительно переместите элемент DOM в ReactJS). Есть ли простой способ перемещения/копирования состояния компонента без внесения в него изменений? Или есть другой подход?

var Application = React.createClass(
{ 
    getInitialState: function() 
    { 
     return {dialogs: [], previews: []}; 
    }, 

    render: function() 
    { 
     return (
      <div> 
       <div id="previews">{this.state.previews}</div> 
       {this.state.dialogs} 
      </div> 
     ); 
    }, 
    ... 
}); 

var g_app = React.renderComponent(<Application />, ...); 

function create_dialog(header, content) 
{ 
    var new_dialog_state = g_app.state.dialogs.slice(); 
    new_dialog_state.push(<Dialog header={header}>{content}</Dialog>); 
    g_app.setState({dialogs: new_dialog_state}); 
} 

var Item = React.createClass(
{ 
    onButtonClick: function() 
    { 
     create_dialog('Item info', <ItemInfo data={this.state.item_info} />); 
    }, 
    ... 
}); 

Answer 1

Как уже упоминалось в комментариях:

Хорошо, я решил проблему путем сохранения состояния внешних компонентов. Компоненты теперь используют только свои реквизиты, которые устанавливаются отдельным объектом Store.
_{- DaviD.}