it-swarm.com.ru

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

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

15
eli
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, установите inline в true

35
AlexVestin

Вы также можете использовать 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>
            ...
        </>
    )
  }
}
14
quotesBro

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

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

Вы можете использовать следующее с 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')
);

Удачного кодирования !!!

2
EsterlingAccime Youtuber

Как уже упоминали другие, вы можете использовать document.title = 'My new title' и React Helmet для обновления заголовка страницы. Оба эти решения будут по-прежнему отображать начальный заголовок «React App» до загрузки сценариев.

Если вы используете create-react-app, заголовок документа initial устанавливается в файле <title> тега /public/index.html.

Вы можете редактировать это напрямую или использовать заполнитель, который будет заполнен из переменных среды:

/.env:

REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...

Если по какой-то причине я хотел другой заголовок в моей среде разработки -

/.env.development:

REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...

/public/index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
         ...
         <title>%REACT_APP_SITE_TITLE%</title>
         ...
     </head>
     <body>
         ...
     </body>
</html>

Этот подход также означает, что я могу читать переменную окружения заголовка сайта из моего приложения, используя глобальный объект process.env, который является Nice:

console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!

Смотрите: Добавление пользовательских переменных среды

1
Gruffy

React Portals позволяет отображать элементы вне корневого узла React (например, в <title>), как если бы они были действительными узлами React. Так что теперь вы можете установить заголовок чисто и без каких-либо дополнительных зависимостей:

Вот пример:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
    constructor(props) {
        super(props);
        this.titleEl = document.getElementsByTagName("title")[0];
    }

    render() {
        let fullTitle;
        if(this.props.pageTitle) {
            fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
        } else {
            fullTitle = this.props.siteTitle;
        }

        return ReactDOM.createPortal(
            fullTitle || "",
            this.titleEl
        );
    }
}
Title.defaultProps = {
    pageTitle: null,
    siteTitle: "Your Site Name Here",
};

export default Title;

Просто поместите компонент на страницу и установите pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
0
Colonel Thirty Two