React门户可以让你渲染根React节点之外的元素(比如<title>)，就像它们是实际的React节点一样。所以现在你可以干净地设置标题，没有任何额外的依赖:

这里有一个例子:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
    constructor(props) {
        super(props);
        this.titleEl = document.getElementsByTagName("title")[0];
    }

    render() {
        let fullTitle;
        if(this.props.pageTitle) {
            fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
        } else {
            fullTitle = this.props.siteTitle;
        }

        return ReactDOM.createPortal(
            fullTitle || "",
            this.titleEl
        );
    }
}
Title.defaultProps = {
    pageTitle: null,
    siteTitle: "Your Site Name Here",
};

export default Title;

只需将组件放在页面中并设置pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />

对于React 16.8，你可以使用一个使用useEffect的功能组件来做到这一点。

例如:

useEffect(() => {
   document.title = "new title"
}, []);

将第二个参数作为数组只调用useEffect一次，使其类似于componentDidMount。

对于这个问题，你有多种选择，我强烈建议使用React Helmet或使用useEffect创建钩子。除了编写自己的钩子，你还可以使用react-use中的钩子:

反应的头盔

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

const MyComponent => () => (
  <Helmet>
    <title>My Title</title>
  </Helmet>
)

react-use

import React from 'react';
import { useTitle } from 'react-use';

const MyComponent = () => {
  useTitle('My Title');

  return null;
}

对于React v18+，自定义钩子将是最简单的方法。

步骤1:创建钩子。(钩/ useDocumentTitle.js)

import { useEffect } from "react";
export const useDocumentTitle = (title) => {

    useEffect(() => {
        document.title = `${title} - WebsiteName`;
    }, [title]);

    return null;
}

步骤2:在每个具有自定义标题的页面上调用钩子。(页面/ HomePage.js)

import { useDocumentTitle } from "../hooks/useDocumentTitle";

const HomePage = () => {
    useDocumentTitle("Website Title For Home Page");
    
    return (
        <>           
            <main>
                <section>Example Text</section>
            </main>            
        </>
    );
}

export { HomePage };

也适用于动态页面，只需传递产品标题或任何您想要显示的内容。

我还没有对它进行彻底的测试，但这似乎是可行的。用TypeScript编写。

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

用法:

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

不知道为什么其他人热衷于将整个应用程序放在<Title>组件中，这对我来说似乎很奇怪。

通过更新文档。如果你想要一个动态标题，render()内的标题会刷新/保持最新。卸载时也应该恢复标题。传送门很可爱，但似乎没有必要;我们不需要操作任何DOM节点。

import React from 'react';

function useTitle(title: string): void => {
  React.useEffect(() => {
    const prevTitle = document.title;
    document.title = title;

    return () => {
      document.title = prevTitle;
    };
  }, []);
}

function MyComponent(): JSX.Element => {
  useTitle('Title while MyComponent is mounted');

  return <div>My Component</div>;
}

这是一个非常直接的解决方案，useTitle设置文档标题，当组件卸载时，它被重置为之前的任何内容。