Как установить заголовок документа в React?

Я хотел бы установить заголовок документа (в строке заголовка браузера) для моего приложения React. Я пробовал использовать react-document-title (устарели) и параметр document.title на constructor и componentDidMount() - ни одно из этих решений работать.

8
dom javascript reactjs

5 ответов

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

это работает для меня.

Edit: если вы используете webpack-dev-server, установите значение true

16

вы должны установить заголовок документа в жизненном цикле 'componentWillMount':

componentWillMount() {
    document.title = 'your title name'
  },
4

можно использовать Реагировать Шлем а также:

import React from 'react';
import {Helmet} from 'react-helmet';

class MyComponent extends React.PureComponent {
  render () {
    return (
        <div>
            <Helmet>
                <title>My Title</title>
            </Helmet>
            ...
        </div>
    );
  }
};
2

вы можете использовать следующие ниже document.title = 'Home Page'

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

Удачи В Кодировании!!!

0

Я впервые нашел этот ответ SpaceK33z на: https://github.com/CodeYellowBV/create-react-cy-app/issues/4

  • вы устанавливаете его в public / index.html, который создается при использовании create-react-app для создания проекта.

Я также добавил следующую дополнительную информацию:

для следующего примера проекта (в windows):

  1. открыть команду nodejs строки
  2. перейти к c:\temp
  3. выполните следующую команду: npx create-react-пример приложения-react-app

  4. когда приложение будет создано, у вас будет следующая папка структура:

    • c:\temp\example-react-app
      • папки node_modules
      • общественные
        • favicon.ico
        • .HTML-код
        • манифест.в JSON
      • src
      • etc.

  5. открыть public / index.HTML-код файл, и вы увидите следующее код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

  </body>
</html>
  1. вы можете увидеть тег title: 

<title>React App</title>
  1. измените заголовок с "React App" на нужное значение.
-2