Reactjs 反应路由器应用程序-路由标题

我正在学习和使用。我正在构建的应用程序是一个移动风格的应用程序，上面有一个导航菜单，下面有一个内容部分。当我浏览应用程序页面时，我想在菜单栏中添加一个页面“标题”，以标识您当前所在的页面

我的路线：

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

{this.props.activeRouteHandler（）}

NavigationMenu.render：

<div className="navigationMenu">
  <div className="navigationMenuTitle>{this.props.title}</div>
</div>

我能够用这个模式解决这个问题，并重新组织我的应用程序布局

标题部分：

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 Title=React.createClass({
getInitialState:函数（）{
返回{
标题：Store.get（）
};
},
componentDidMount:函数（）{
Store.addChangeListener（this.\u onChange）；
},
componentWillUnmount:function（）{
Store.removeChangeListener（this.\u onChange）；
},
_onChange:function（）{
这是我的国家({
标题：Store.get（）
});
},
render:function（）{
返回(
{this.state.title}
);
}
});

页面/内容组件遵循以下结构：

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

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”；
返回(
);
}
});

这允许组件加载、动态设置标题，并在应用程序良好且准备就绪时仅更新标题组件！漂亮
 正如杰夫·费尔利（Jeff Fairley）在上文中所建议的，使用回流将有助于清理这一问题（此代码使用ES6功能，因此需要一个transpiler来运行它）：

滴定法

import Reflux from 'reflux';

export default Reflux.createActions([ 'update' ]); 

TitleStore

import Reflux from 'reflux';
import TitleActions from '../actions/title';

export default Reflux.createStore({
  listenables: TitleActions,

  getInitialState: function() {
    return 'My Cool New Project';
  },

  onUpdate(title) {
    this.trigger(title);
  }
});

导航菜单

import React from 'react/addons';
import Reflux from 'reflux';
import TitleStore from '../stores/title';

export default React.createClass({
  mixins: [ Reflux.connect(TitleStore, 'title') ],

  render() {
    return <div className="navigationMenu">
      <div className="navigationMenuTitle>{this.state.title}</div>
    </div>;
  }
});

还可以查看以减少样板代码
import React from 'react/addons';
import Reflux from 'reflux';
import TitleActions from '../actions/title';

export default React.createClass({
  componentDidMount() {
    TitleActions.update('My Custom Title');
  },

  render() {
    return <div>My content.</div>;
  }
});

MyComponent -> update action -> TitleStore -> NavigationMenu