我正在学习
React并使用
React-router.我正在构建的应用程序是一个移动风格的应用程序,顶部导航菜单和下面的内容部分.当我浏览应用页面时,我想在菜单栏中添加页面“标题”,以确定您当前所在的页面.
我的路线：
<Routes>
<Route name='home' path='/' handler={HomePage}>
<Route name='product-list' path='products/' handler={ProductList}/>
<Route name='product-detail' path='product/:slug/' handler={ProductDetail} addHandlerKey={true}/>
</Route>
</Routes>
HomePage.render：
<div className="container">
<NavigationMenu />
<div className="contents">
{this.props.activeRouteHandler()}
</div>
</div>
NavigationMenu.render：
<div className="navigationMenu">
<div className="navigationMenuTitle>{this.props.title}</div>
</div>
我的问题
到HomePage的子路由需要根据Ajax调用返回的内容设置其标题.
我原本想过为每条路线添加回调,将标题传递给它们的父类,而父类又可以将这些数据传递给NavigationMenu.不幸的是,这不起作用：当您浏览页面时,重复调用的唯一函数是渲染,此处设置状态会引发不变违规错误.
我的问题
>有没有更好的方法来管理标题？
>跟踪当前页面是否有任何替代方法,而不是依赖于路由渲染功能每次都将数据传递给回调(这看起来很脏)？
我能够使用
React Flux模式解决这个问题,并重新组织我的应用程序布局.
原文链接：https://www.f2er.com/react/301081.html标题组件：
var Title = React.createClass({
getInitialState: function() {
return {
title: Store.get()
};
},componentDidMount: function () {
Store.addChangeListener(this._onChange);
},componentWillUnmount: function() {
Store.removeChangeListener(this._onChange);
},_onChange: function() {
this.setState({
title: Store.get()
});
},render: function() {
return (
<span className="Title">{this.state.title}</span>
);
}
});
var Image = React.createClass({
componentDidMount: function() {
Action.update('Image - '+ this.props.params.service);
},render: function() {
var src = "http://place"+this.props.params.service+".com/g/400/400";
return (
<div className="Image">
<img src={src}/>
</div>
);
}
});
