react如何改變title

蝸牛 互聯網技術資訊 2022-05-03 146 0

這篇“react如何改變title”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“react如何改變title”文章吧。

方法:1、用“document.title="title名"”在組件的componentDidMount生命周期中修改;2、用“react-helmet”,該組件用于管理對文檔頭的所有更改,可用“npm i react-helmet”安裝。

本教程操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react怎么改變title

1、原生js修改文檔頭:

document.title?=?'標題'

2、在react中可以在組件的componentDidMount生命周期中設置

document.title?=?'標題'

3、也可以

<Route?onEnter={()=>{document.title='標題'}}?/>

4、或者安裝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"??/>
????????????????</Helmet>
????????????????...
????????????</div>
????????)
????}
};

特性:

1,支持所有有效的頭標簽,title base meta link script noscript style

2,支持body html title標簽的屬性

3,支持服務端渲染

4,嵌套組件重寫重復的頭改變

以上就是關于“react如何改變title”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看