2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > React-document-title实现动态更新页面Title

React-document-title实现动态更新页面Title

时间:2020-09-15 16:08:26

相关推荐

React-document-title实现动态更新页面Title

因为react是单页应用,所以可能需要根据不同的路由改变文档的title。

我们可以使用react-document-title组件实现,其提供了一种document.title在单页面应用程序中指定的声明方式。

首先使用npm install react-document-title进行安装,然后在文件中引入import DocumentTitle from "react-document-title"

官方文档提供了以下几种例子:

var App = React.createClass({render: function () {// Use "My Web App" if no child overrides thisreturn (<DocumentTitle title='My Web App'><this.props.activeRouteHandler /></DocumentTitle>);}});var HomePage = React.createClass({render: function () {// Use "Home" while this component is mountedreturn (<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 mountedreturn (<DocumentTitle title={this.state.title || 'Untitled'}><div><h1>New Article</h1><input valueLink={this.linkState('title')} /></div></DocumentTitle>);}});

我在实现各页面动态显示title时,在各自文件render的return返回里,最外层使用DocumentTitle组件。

render{

return(

<DocumentTitle>

......

</DocumentTitle>

)

}

然后,对其title属性可以定义想要现实的标题。这样,当点击切换到指定的页面时,就会动态变化title。

参考资料:

1./package/react-document-title

2./p/07ed93350483

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。