如何在 React 中设置文档标题？

javascript dom reactjs

2022-08-30 01:00:04

我想为我的 React 应用程序设置文档标题（在浏览器标题栏中）。我尝试过使用react-document-title（似乎过时了）并在and中设置 - 这些解决方案都不起作用。document.titleconstructorcomponentDidMount()

答案 1

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')
);

这对我有用。

编辑：如果您使用的是内联设置为 true 的 webpack-dev-server

答案 2

对于 React 16.8+ ，您可以在函数组件中使用 Effect Hook：

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = 'My Page Title';
  });
}

要以声明性方式管理所有有效的 head 标签，包括，您可以使用 React Helmet 组件：<title>

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