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);
    }

代码很简单：当位置哈希值发生变化时，使用<Component />的新道具（ele的值为子组件）重新呈现ele。

每次重新呈现Component都会触发componentWillReceiveProps并将<Subcomponent_* />推送到subcomponents。

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

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

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

更新

以某种方式删除<Component />时，如何保留<SubComponent_1 />的整个数据？我发现添加<SubComponent_2 />道具对所有子组件都不起作用。

Answer 1

您似乎希望react-router使用某种助焊剂实现。

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

Redux作为助焊剂实施正变得非常流行。

有足够的资源将这些东西组合在一起：

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

<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}

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

1 个答案: