使用 ReactJS 的动态页面标题

Question

我想在 ReactJS 上制作动态页面标题。我尝试了很多东西，但没有成功。我用数据创建一个数组：

let pageTitles = [
    {key:"/Home", title:"Welcome Home"},
    {key:"/SecondPage", title:"Shop"},
    {key:"/ThirdPage", title:"ContactUs"},
];

在html中只有<title></title>，我用let pathname = window.location.pathname;如果是return“/Home”或“/ThirdPage”动态设置新标题。我试过类似的东西：

for (var i = 0, len = pageTitles.length; i < len; i++) {
        if (pageTitles[i].key === pathname) {
            var hhh = pageTitles[i].text;
        }
    }
document.title = hhh

但是显然不行。很抱歉，如果有这样的话题，但我没有发现 it.I 有安装模块的限制。

Answer 1

如果你需要避免安装模块，你可以这样做作为帮助文件，然后只需将它导入你需要的模块并调用 componentDidMount

export function seo(data = {}) {
  data.title = data.title || 'Default title';
  data.metaDescription = data.metaDescription || 'Default description';

  document.title = data.title;
  document.querySelector('meta[name="description"]').setAttribute('content', data.metaDescription);
}

import React from 'react';
import {seo} from '../helpers/seo';

export default class SomeClass extends Component {
  constructor(props) {
    super(props);
  };

  componentDidMount() {
    seo({
      title: 'This is my title only shown on this page',
      metaDescription: 'With some meta description'
    });
  }

  render() {
    return <h1>Hello World</h1>;
  }
}

您也可以在任何地方直接调用 document.title = 'My new title'，但如果您将其提取为函数，您可以选择使用默认函数，并在需要时提供覆盖。

编辑：在检查您的代码时，如果您将 hhh = pageTitles[i].text; 更改为 hhh = pageTitles[i].title;，它将起作用。在循环外声明 var 会很好。有默认值也很好。

使用 ReactJS 的动态页面标题

Dynamic page title with ReactJS

javascript

dynamic

title

reactjs