react做的是单页应用,也就是说页面路由变化的时候标题不会自动变化,很多时候需要自动手动去修改

于是封装了一个组件,专门用于修改标题

DocTtle.jsx

class DocTitle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    
    componentDidMount() {
        document.querySelector('title').innerHTML = this.props.title;
    }
    
    render() {
        return (<div>
            {React.Children.only(this.props.children)}
        </div>);
    }
}

DocTitle.PropTypes = {
    children: PropTypes.elememt.isRequred,
    title: PropTypes.string.isRequired
};

调用方式:

class Page extends React.Component {
    // ....
    
    return (<DocTitle title="我是标题">
        ...这是个页面
    </DocTitle>);
}