react-document-title

因为react是单页应用,所以我们可能需要根据不同的路由改变文档的title;react-document-title组件可以实现:
提供了一种document.title在单页面应用程序中指定的声明方式。
这个组件也可以在服务器端使用。

var App = React.createClass({
  render: function () {
    // Use "My Web App" if no child overrides this
    return (
      <DocumentTitle title='My Web App'>
        <this.props.activeRouteHandler />
      </DocumentTitle>
    );
  }
});

var HomePage = React.createClass({
  render: function () {
    // Use "Home" while this component is mounted
    return (
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    );
  }
});

var NewArticlePage = React.createClass({
  mixins: [LinkStateMixin],

  render: function () {
    // Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title || 'Untitled'}>
        <div>
          <h1>New Article</h1>
          <input valueLink={this.linkState('title')} />
        </div>
      </DocumentTitle>
    );
  }
});

特征

-不排放DOM,甚至不是一个<noscript>;
-像一个正常的React组件,可以使用其父组件的props和state;
-可以在整个应用程序的许多地方定义;
-支持任意级别的嵌套,所以你可以定义应用程序范围和页面特定的标题;
-与同构应用程序一样好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,835评论 1 18
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,254评论 25 709
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 5,658评论 0 5
  • 黑暗萝莉大美g: 骂我可以但是不要把唾液喷到我的脸上,打我可以但是先保证你的血不会溅到我的身上, 也许你真的很牛逼...
    笑脸赢人脉哈哈阅读 13,057评论 0 0
  • 最近总是会莫名的难过,突然想的很开朗,突然又钻进了死胡同,在不熟悉的异乡,有的只是孤独的总和,幸福也好爱也好,都...
    一诺倾城0608阅读 3,233评论 0 0