javascript - 使用 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;如果它返回“/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

但显然没用。如果有这样的主题，我很抱歉，但我没有找到它。我对安装模块有限制。

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 会很好。如果有默认值也很好。