javascript - ReactJS:移动组件状态

Question

我正在尝试实现一个包含大量对话框的应用程序。通常，组件需要以“即发即忘”的方式启动对话框，因此我有一个函数 create_dialog() ，它接受一个 React.DOM 元素并附加它到 App 组件(顶级组件)状态下的 dialogs 数组，该组件在其 render() 函数中渲染所有对话框。

这很容易使用并且工作正常，但现在我希望能够最小化对话框并在任务栏中显示一些预览。我尝试执行此操作的方法是将新数组 previews 添加到 App 的状态，并且在最小化对话框时，我会将其从 dialogs 中删除code> 并将其附加到 previews 中，该预览将呈现到页面上的不同元素中。

问题是 React.DOM.* 元素只是不存储状态的轻量级引用，因此当最小化对话框时，所有状态都会丢失，因为必须重新安装对话框组件(并且作为据我所知，在 ReactJS 中没有办法真正移动 DOM 元素。有没有一种简单的方法可以移动/复制组件的状态而不对其进行更改？或者有不同的方法吗？

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

正如评论中提到的:

Okay, I solved the problem by storing the state outside components. Components now only user their props which are set by a separate Store object.
_{- DaviD.}