动态改变react页面＜head＞中的内容

月影WEB

已于 2022-04-28 22:05:36 修改

阅读量1.1k

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

于 2022-04-28 20:34:16 首次发布

本文链接：https://blog.csdn.net/qq_34297287/article/details/124482936

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先安装依赖项：

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  // 获取当前页面的地址
    let titles = '月影WEB'
    if(hrefs.indexOf("admin") > 0){  // 当地址里面包含admin的时候页面标题为'月影qw管理后台'
        titles = '月影qw管理后台'
    }
    // 当前的例子只改变了页面标题title，这里可以根据自己的需求来动态改变页面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，按照以上的步骤进行，这样不同的页面就能动态改变<head>中的title了，如下图：
图3

如果需要动态改变<head>之中的其它标签元素也是通过同样的思路进行处理；

另外需要注意的是：
1.如果模板页面<head>之中的标签和新建的组件HeadHelmet的标签没有重复的话，那么两者会进行合并；
2.如果模板页面<head>之中的标签和新建的组件HeadHelmet的标签有重复的话，那么两者出现的相同标签会以新建组件HeadHelmet之中的内容为主，也就是相同的标签HeadHelmet之中的内容会覆盖模板页面相同标签，不同的标签会进行合并同时存在；

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；

月影WEB

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
动态改变react页面＜head＞中的内容

首先安装依赖项：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 () { ...
复制链接

扫一扫