javascript - 你如何在 React 中设置文档标题？

Question

我想为我的 React 应用程序设置文档标题(在浏览器标题栏中)。我试过使用 react-document-title (似乎已过时)并在 constructor 和 componentDidMount() 中设置 document.title - 这些解决方案均无效。

Answer 1

对于 React 16.8+，您可以使用 Effect Hook在功能组件中:

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = 'My Page Title';
  }, []);
}

管理所有有效的头标签，包括 <title> ，以声明的方式，您可以使用 React Helmet组件:

import React from 'react';
import { Helmet } from 'react-helmet';

const TITLE = 'My Page Title';

class MyComponent extends React.PureComponent {
  render () {
    return (
      <>
        <Helmet>
          <title>{ TITLE }</title>
        </Helmet>
        ...
      </>
    )
  }
}