初识react（16）—— 如何动态渲染 标题title 关键字 描述

一、首先在index.html中写如下代码（在用脚手架搭建react项目时，index.html文件已有 title和name值为description的meta这两部分的代码，所以可以再添加个 关键字的 meta）：

<meta
      name="description"
      content="description"
    />
    <meta
            name="keyWord"
            content="keyWord"
    />
    <title>我是标题</title>

二、发送请求获取动态 title 关键字 描述：

const set = async () => {
   const res = await http.get('/xxx/xxx', '');//单引号里填入自己的接口
   console.log(res);
};

这里我是将代码写在了入口文件 index.js里，我是在路由中写了个onEnter{set()}事件，实现的。

三、关键代码：

我先取出需要的数据并打印看是否有误。

const title = res.data.data.title;
const keyWord = res.data.data.keyWord;
const description = res.data.data.description;
console.log(title);
console.log(keyWord);
console.log(description);

然后通过js获取俩meta（数一下第一步的meta分别是index.html文件代码里第几个meta），修改其内容。

const descriptionObj=document.getElementsByTagName("meta")[3];
const keyWordObj=document.getElementsByTagName("meta")[4];
console.log(descriptionObj);
console.log(keyWordObj);
descriptionObj.content=description;
keyWordObj.content=keyWord;

至于如何修改 title，那就更简单不过了：

document.title = title;

这部分代码和在一起就是：

const set = async () => {
   const res = await http.get('/xxx/xxx', '');//单引号里填入自己的接口
   console.log(res);
   if (res.data.success){
       const title = res.data.data.title;
       const keyWord = res.data.data.keyWord;
       const description = res.data.data.description;
       console.log(title);
       console.log(keyWord);
       console.log(description);
       const descriptionObj=document.getElementsByTagName("meta")[3];
       const keyWordObj=document.getElementsByTagName("meta")[4];
       console.log(descriptionObj);
       console.log(keyWordObj);
       document.title = title;
       descriptionObj.content=description;
       keyWordObj.content=keyWord;
    }else {
        message.error("请求出错");
    }
};

这里是我对 axios 进行了封装使用，相关内容可以看我的博客：

初识react（9）——实现 axios 的封装使用

之前百度 react 如何设置head内容时，看到一种方法：通过react-helmet设置的，但是我试了试没实现，不知道是哪里出现了问题，希望会的大佬能告知，万分感谢。