如何保持子组件的数据和状态？

Question

这是我的代码：

var Component_1 = React.createClass({
        getInitialState: function() {
            return {
                subcomponents: []
            };
        },
        componentWillReceiveProps: function(nextProps) {
            //push new subcomponent into 'subcomponents'
            this.state.subcomponents.push(nextProps.ele);
        },
        render: function() {
            return (
                <div>
                    {this.state.subcomponents}
                </div>
            );
        }
    });

    // A router like that:
    var hash = window.location.hash
    if (hash === '#way1') {
        React.render( < Component ele={<SubComponent_1 />} /> , document.body);
    } else if (hash === '#way2') {
        React.render( < Component ele={<SubComponent_2 />} /> , document.body);
    } else {
        React.render( < Component ele={<SubComponent_3 />} /> , document.body);
    }

代码很简单：当位置哈希改变时，使用ele 的新道具重新渲染<Component />（并且ele 的值是一个子组件）。

每次重新渲染Component 都会触发componentWillReceiveProps 并将<Subcomponent_* /> 推入subcomponents。

所以在特定情况下，<Component /> 可能看起来像这样：

<div>
    <SubComponent_1 />
    <SubComponent_2 />
</div>

我的目的是：当<SubComponent_2 />推入subcomponents并触发<Component />时，如何将整个数据（例如用户输入input元素的一些数据）保留在<SubComponent_1 />中用两个子组件重新渲染？

更新：

当<SubComponent_1 />以某种方式被删除时，如何保留<SubComponent_2 />的全部数据？我发现将 key 属性添加到所有子组件不起作用。

Answer 1

您似乎希望将react-router 与某种通量实现一起使用。

路由器将处理所有# 更改，flux 将保持您的应用程序状态。

Redux 作为通量实现变得非常流行。

有很多资源可以将这些东西组合在一起：

• http://ngokevin.com/blog/redux-react-router/
• https://github.com/emmenko/redux-react-router-async-example
• https://github.com/rackt/redux-router

对于您的用例，我建议使用以下路由器配置：

<Router>
  <Route path='/' component={Component}>
    <Route path='way1' component={SubComponent_1} />
    <Route path='way2' component={SubComponent_2} />
    <IndexRoute component={SubComponent_3} />
  </Route>
</Router>

然后在您的 Component 渲染函数中，您只需要包含

{this.props.children}