reactjs – React路由器应用程序 – 路由标题

发布时间：2020-12-15 20:50:02 所属栏目：百科来源：网络整理

导读：我正在学习 React并使用 React-router.我正在构建的应用程序是一个移动风格的应用程序,顶部导航菜单和下面的内容部分.当我浏览应用页面时,我想在菜单栏中添加页面“标题”,以确定您当前所在的页面. 我的路线： Routes Route name='home' path='/' handler={H

我正在学习 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模式解决这个问题,并重新组织我的应用程序布局.

标题组件：

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

这允许组件加载,动态设置标题,并在应用程序良好且准备好时仅更新标题组件！漂亮！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!