美文网首页
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