对于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>
        ...
      </>
    )
  }
}

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开始。你可以构建一个自定义钩子来实现(类似于@Shortchange的解决方案):

export function useTitle(title) {
  useEffect(() => {
    const prevTitle = document.title
    document.title = title
    return () => {
      document.title = prevTitle
    }
  })
}

这可以在任何react组件中使用，例如:

const MyComponent = () => {
  useTitle("New Title")
  return (
    <div>
     ...
    </div>
  )
}

它将在组件挂载时立即更新标题，并在卸载时将其恢复到以前的标题。

如果你想知道，你可以直接在渲染函数中设置它:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

对于功能组件:

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

但是，这是一个不好的做法，因为它会阻塞渲染(React优先考虑渲染)。

好的做法:

类组件:

class App extends React.Component {
    // you can also use componentDidUpdate() if the title is not static
    componentDidMount(){
        document.title = "good"
    }

    render() {
        return <p>Hello</p>
    }
}

功能组件:

function App() {
    // for static title, pass an empty array as the second argument
    // for dynamic title, put the dynamic values inside the array
    // see: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
    useEffect(() => {
        document.title = 'good'
    }, []);

    return <p>Hello</p>
}

头盔确实是一个很好的方法，但对于那些只需要改变标题的应用程序，这是我使用的: (现代的React解决方案-使用Hooks)

创建更改页面标题组件

import React, { useEffect } from "react";

const ChangePageTitle = ({ pageTitle }) => {
  useEffect(() => {
    const prevTitle = document.title;
    document.title = pageTitle;
    return () => {
      document.title = prevTitle;
    };
  });

  return <></>;
};

export default ChangePageTitle;

使用组件

import ChangePageTitle from "../{yourLocation}/ChangePageTitle";

...

return (
    <>
      <ChangePageTitle pageTitle="theTitleYouWant" />
      ...
    </>
  );

...

我不确定这是否是一个好的做法，但在index.js头我放:

document.title="Page Title";