REACT_react动态修改页面title，自定义文档头

女爷i 2022-10-19 12:41 405阅读 0赞

# 方法一 #

在 componentDidMount 为 document.title 赋值

componentDidMount() { 
    	document.title = this.props.title
    }

注意：不能在 render() 函数中为 document.title 赋值，因为 render() 执行时还没有真正的DOM，所以无法获得 document 对象。

# 方法二 #

[https://www.npmjs.com/package/react-document-title][https_www.npmjs.com_package_react-document-title]  
安装

npm install --save react-document-title

引入

import DocumentTitle from 'react-document-title'

使用

return (
    	<DocumentTitle title='English'>
    		<h1>English</h1>
    	</DocumentTitle>
    )

# 方法三 #

[https://www.npmjs.com/package/react-helmet][https_www.npmjs.com_package_react-helmet]  
react-helmet，官网的解释是：这个可复用的react组件将管理你在文档头的所以更改。它你可以定制你的页面title  
安装

npm install react-helmet --save

import React from 'react';
    import { Helmet} from 'react-helmet';
     
    class Application extends React.Component { 
    	render () { 
    	    return (
    	        <div className="application">
    	            <Helmet>
    	                <meta charSet="utf-8" />
    	                <title>My Title</title>
    	                <link rel="canonical" href="http://mysite.com/example" />
    	            </Helmet>
    	            ...
    	        </div>
    	    )
    	}
    }

特性：

1，支持所有有效的头标签，title base meta link script noscript style  
2，支持body html title标签的属性  
3，支持服务端渲染  
4，嵌套组件重写重复的头改变

[https_www.npmjs.com_package_react-document-title]: https://www.npmjs.com/package/react-document-title
[https_www.npmjs.com_package_react-helmet]: https://www.npmjs.com/package/react-helmet