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


当前回答

你可以简单地在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

其他回答

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

首先,我用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解决方案-使用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" />
      ...
    </>
  );

...

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

例如:

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

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

const [name, setName] = useState("Jan");
  useEffect(() => 
    {document.title =   "Celebrate " +  {name}.name  ;}
  );
  

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