这是我的代码:
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 />
带有新 Prop ele
(ele
的值是一个子组件)。
每次重新渲染 Component
将触发componentWillReceiveProps
并推<Subcomponent_* />
进入subcomponents
.
因此在特定情况下,<Component />
可能看起来像这样:
<div>
<SubComponent_1 />
<SubComponent_2 />
</div>
我的目的是:如何将整个数据(例如用户在 input
元素中输入的某些数据)保留在 <SubComponent_1 />
中,当 <SubComponent_2 />
插入subcomponents
并触发<Component />
使用两个子组件重新渲染?
更新:
何时 <SubComponent_1 />
以某种方式被删除,如何保留 <SubComponent_2 />
的全部数据?我发现添加key
所有子组件的 prop 都不起作用。
最佳答案
看起来您会想要使用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}
关于javascript - 如何保存子组件的数据和状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32839159/