1、在react的container组件中componentDidMount生命周期中
document.title="这是title名称"
2、或者在路由配置中使用onEnter事件修改
例如:
<Route path="qa" component={QA} onEnter={()=>{document.title="这是title名称"}}/>
3、使用react-side-effect是一个类似Connect组件的容器,通常它被称为高阶组件。可能就会用到react-document-title插件
例如:
var React = require('react'),
PropTypes = require('prop-types'),
withSideEffect = require('react-side-effect');
4、封装公共组件。在react中,我们可以使用非常少的代码封装出一个公共组件,来修改每个路由的title。
import React from 'react'
import PropTypes from 'prop-types'
export default class ReactDocumentTitle extends React.Component {
setTitle() {
const { title } = this.props
document.title = title
}
componentDidMount() {
this.setTitle()
}
componentDidUpdate() {
this.setTitle()
}
render() {
return React.Children.only(this.props.children)
}
}
ReactDocumentTitle.propTypes = {
title: PropTypes.string.isRequired
}
这份代码是将react-side-effect和react-document-title合并。
使用该组件:
import ReactDocumentTitle from 'path/ReactDocumentTitle'
render() {
return (
<ReactDocumentTitle title="文档标题">
</ReactDocumentTitle>
)
}