美文网首页
react-document-title

react-document-title

作者: 胖太_91bf | 来源:发表于2017-11-09 17:42 被阅读0次

因为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-document-title

      本文链接:https://www.haomeiwen.com/subject/mndmmxtx.html