你可以使用下面的文档。title = '主页'

import React from 'react'
import { Component } from 'react-dom'


class App extends Component{
  componentDidMount(){
    document.title = "Home Page"
  }

  render(){
    return(
      <p> Title is now equal to Home Page </p>
    )
  }
}

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

或者你可以使用这个npm包npm i react-document-title

import React from 'react'
import { Component } from 'react-dom'
import DocumentTitle from 'react-document-title';


class App extends Component{


  render(){
    return(
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    )
  }
}

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

编码快乐! !

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

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

例如:

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

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

你可以简单地在js文件中创建一个函数，并将其导出到组件中使用

像下图:

export default function setTitle(title) {
  if (typeof title !== "string") {
     throw new Error("Title should be an string");
  }
  document.title = title;
}

并像这样在任何组件中使用它:

import React, { Component } from 'react';
import setTitle from './setTitle.js' // no need to js extension at the end

class App extends Component {
  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App