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

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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

Если вы используете create-react-app начальный заголовок документа устанавливается в <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, что приятно:

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

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

Ответ 5

Порталы React позволяют отображать элементы вне корневого узла 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} />

Ответ 6

Для React 16.8 вы можете сделать это с помощью функционального компонента, используя useEffect.

Например:

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

Наличие второго аргумента в качестве массива вызывает useEffect только один раз, делая его похожим на componentDidMount.

Ответ 7

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

Счастливое кодирование !!!

Ответ 8

Я не проверил это слишком тщательно, но, похоже, это работает. Написано на TypeScript.

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

Использование:

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

Не знаю, почему другие хотят поместить все свое приложение в свой компонент <Title>, что мне кажется странным.

Обновив document.title внутри render() вы обновите/обновите его, если вам нужен динамический заголовок. Он должен вернуть название, когда он не подключен. Порталы милые, но кажутся ненужными; нам не нужно манипулировать здесь какими-либо узлами DOM.

Ответ 9

Просто вы можете создать функцию в 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

Ответ 10

import React from 'react'
import ReactDOM from 'react-dom'


class Doc extends React.Component{
  componentDidMount(){
    document.title = "This is title"
  }

  render(){
    return(
      <b> test </b>
    )
  }
}

ReactDOM.render(
  <Doc />,
  document.getElementById('container')
);

Ответ 11

Если вы новичок, вы можете просто спасти себя от всего этого, зайдя в общую папку вашей папки проекта реагирования, отредактировав заголовок в "index.html" и поместив свой. Не забудьте сохранить, чтобы оно отразилось.

Ответ 12

Сначала я нашел, что это ответил SpaceK33z по адресу: https://github.com/CodeYellowBV/create-react-cy-app/issues/4

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

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

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

Откройте командную строку nodejs
Перейдите к c:\temp
Выполните следующую команду: npx create-react-app example-response-app
Когда приложение закончит создание, тогда у вас будет следующая структура папок:
- C:\Temp\пример реагирующего-приложение
  - node_modules
  - общественности
    - favicon.ico
    - index.html
    - manifest.json
  - ЦСИ
  - и т.п.
Откройте файл 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>