对于这个问题，你有多种选择，我强烈建议使用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;
}

我想使用页面标题我的常见问题页面。所以我用了反应头盔。

首先，我用npm i react-helmet安装了react-helmet

然后我在我的返回中添加了这样的标签:

import React from 'react'

import { Helmet } from 'react-helmet'


const PAGE_TITLE = 'FAQ page'


export default class FAQ extends Component {

  render () {

    return (

      
        
          { PAGE_TITLE }
        
        This is my faq page
      
    )
  }
}

你应该在'componentWillMount'的生命周期中设置文档标题:

componentWillMount() {
    document.title = 'your title name'
  },

钩子的更新:

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

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

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

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


class Doc extends React.Component{
  componentDidMount(){
    document.title = "dfsdfsdfsd"
  }

  render(){
    return(
      <b> test </b>
    )
  }
}

ReactDOM.render(
  <Doc />,
  document.getElementById('container')
);

这对我很有用。

编辑:如果你使用webpack-dev-server，将内联设置为true