ReactJS：移动组件状态答案

【问题标题】：ReactJS: Move component stateReactJS：移动组件状态
【发布时间】：2014-12-16 14:25:07
【问题描述】：

我正在尝试实现一个对话重的应用程序。通常，一个组件需要以一种即发即弃的方式启动一个对话框，所以我有一个函数create_dialog()，它接受一个React.DOM 元素并将其附加到dialogs 数组中，状态为App在其render() 函数中呈现所有对话框的组件（顶级组件）。

这很容易使用并且工作正常，但现在我希望能够最小化对话框并在任务栏中显示一些预览。我尝试这样做的方法是将一个新数组previews 添加到Apps 状态，并且在最小化对话框时，我会将它从dialogs 中删除并将其附加到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} />);
    },
    ...
});

【问题讨论】：

您可能需要隐藏它们而不是从 dom 中删除它们，请参阅 stateful children。而且，您使用“状态”的方式似乎不太正确
但即使我隐藏而不是删除它们，我仍然需要它们的状态。是的，我也不喜欢将 DOM 元素置于 state 中，这只是我想到的第一个解决方案。
好的，我通过将状态存储在组件外部解决了这个问题。组件现在只使用由单独的 Store 对象设置的 props。

标签： javascript reactjs

【解决方案1】：

如 cmets 中所述：

好的，我通过将状态存储在组件之外解决了这个问题。组件现在仅使用由单独的 Store 对象设置的道具。
_{- DaviD.}

【讨论】：