首先安裝依賴項(xiàng)：
npm install --save-dev react-helmet
然后新建一個組件HeadHelmet，代碼如下：
import React from 'react';
import { connect } from 'react-redux';
import { Helmet } from "react-helmet"; // 引用head管理工具
class HeadHelmet extends React.Component {
? render () {
? ? const hrefs = window.document.location.href? // 獲取當(dāng)前頁面的地址
? ? let titles = '月影WEB'
? ? if(hrefs.indexOf("admin") > 0){? // 當(dāng)?shù)刂防锩姘琣dmin的時候頁面標(biāo)題為'月影qw管理后臺'
? ? ? ? titles = '月影qw管理后臺'
? ? }
? ? // 當(dāng)前的例子只改變了頁面標(biāo)題title，這里可以根據(jù)自己的需求來動態(tài)改變頁面head里面所需要的元素
? ? return (
? ? ? ? <Helmet>
? ? ? ? ? ? <title>{titles}</title>
? ? ? ? </Helmet>
? ? )
? }
}
export default connect()(HeadHelmet);
然后在react的主頁面中引入剛剛新建的組件，如下圖：
圖1
代碼為：
import "core-js";
import "regenerator-runtime/runtime";
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store,{persistor} from './config/store/store';
import App from './run/components/app/app';
import './static/css/comm.css';
import {PersistGate} from 'redux-persist/integration/react';
import HeadHelmet from './run/components/helmet'
render(
? ? <Provider store={store}>
? ? ? ? <PersistGate loading={null} persistor={persistor}>
? ? ? ? ? ? <HeadHelmet></HeadHelmet>
? ? ? ? ? ? <App />
? ? ? ? </PersistGate>
? ? </Provider>,
? ? document.getElementById('root')
)
模板頁面如下圖：
圖2
模板頁面的head之中沒有加title，按照以上的步驟進(jìn)行，這樣不同的頁面就能動態(tài)改變head中的title了，如下圖：
圖3
如果需要動態(tài)改變head之中的其它標(biāo)簽元素也是通過同樣的思路進(jìn)行處理；
另外需要注意的是：
1.如果模板頁面head之中的標(biāo)簽和新建的組件HeadHelmet的標(biāo)簽沒有重復(fù)的話，那么兩者會進(jìn)行合并；
2.如果模板頁面head之中的標(biāo)簽和新建的組件HeadHelmet的標(biāo)簽有重復(fù)的話，那么兩者出現(xiàn)的相同標(biāo)簽會以新建組件HeadHelmet之中的內(nèi)容為主，也就是相同的標(biāo)簽HeadHelmet之中的內(nèi)容會覆蓋模板頁面相同標(biāo)簽，不同的標(biāo)簽會進(jìn)行合并同時存在；
