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


当前回答

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

首先,我用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 ) } }

其他回答

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

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

如果你是一个初学者,你可以去你的react项目文件夹的公共文件夹,在“index.html”中编辑标题,然后把你的标题放进去。别忘了保存,这样照片才会反射。

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

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