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>
)
}