1、在react的container組件中componentDidMount生命周期中
document.title="這是title名稱"
2竣贪、或者在路由配置中使用onEnter事件修改
例如:
<Route path="qa" component={QA} onEnter={()=>{document.title="這是title名稱"}}/>
3扒吁、使用react-side-effect是一個(gè)類似Connect組件的容器垄分,通常它被稱為高階組件饲宛【驮可能就會(huì)用到react-document-title插件
例如:
var React = require('react'),
PropTypes = require('prop-types'),
withSideEffect = require('react-side-effect');
4险掀、封裝公共組件沪袭。在react中,我們可以使用非常少的代碼封裝出一個(gè)公共組件樟氢,來修改每個(gè)路由的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="文檔標(biāo)題">
</ReactDocumentTitle>
)
}