我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。


当前回答

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

例如:

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

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

其他回答

头盔确实是一个很好的方法,但对于那些只需要改变标题的应用程序,这是我使用的: (现代的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";

你可以使用下面的文档。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 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>
        ...
      </>
    )
  }
}

你可以使用ReactDOM和修改<title>标签

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);