因为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;
-可以在整个应用程序的许多地方定义;
-支持任意级别的嵌套,所以你可以定义应用程序范围和页面特定的标题;
-与同构应用程序一样好。
网友评论