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

Question 1

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

Question 2

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

Question 3

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

Question 4

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

Например:

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

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

Question 5

Как уже упоминалось, вы можете использовать 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!

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

Question 6

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

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

Question 7

Порталы 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} />

Question 8

В React 16.13 вы можете установить его прямо внутри функции рендеринга:

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

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

Для функционального компонента:

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

Question 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

Question 10

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

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

Question 11

Я не проверял это слишком тщательно, но, похоже, это работает. Написано на 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.

Question 12

Вы можете использовать ReactDOM и изменить <title>тег

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

Question 13

Поскольку React 16.8. для этого вы можете создать собственный хук (аналогично решению @Shortchange):

export function useTitle(title) {
  useEffect(() => {
    const prevTitle = document.title
    document.title = title
    return () => {
      document.title = prevTitle
    }
  })
}

это можно использовать в любом реакционном компоненте, например:

const MyComponent = () => {
  useTitle("New Title")
  return (
    <div>
     ...
    </div>
  )
}

Он обновит заголовок, как только компонент монтируется, и вернет его к предыдущему заголовку при размонтировании.

Question 14

Я использую этот метод, о котором узнал, так как он мне проще. Я использую его в сочетании с функциональной составляющей. Делайте это только в том случае, если вам все равно, что он не будет отображать заголовок, если пользователь отключит Javascript на вашей странице.

Вам нужно сделать две вещи.

1. Зайдите в свой index.html и удалите эту строку здесь

<title>React App</title>

2.Перейдите в свою функцию mainapp и верните это, что представляет собой обычную структуру html, вы можете скопировать и вставить свой основной контент со своего веб-сайта между тегами body:

return (
        <html>
          <head>
            <title>hi</title>
          </head>
          <body></body>
        </html>
      );

Вы можете заменить название как хотите.

Question 15

const setTitle = (title) => {
  const prevTitle = document.title;
  document.title = title;
  return () => document.title = prevTitle;
}

const MyComponent = () => {
  useEffect(() => setTitle('Title while MyComponent is mounted'), []);

  return <div>My Component</div>;
}

Это довольно простое решение, которое я придумал сегодня во время работы. setTitleвозвращает функцию, которая сбрасывает заголовок до того, что было до использования setTitle, она прекрасно работает внутри useEffectловушки React .

Question 16

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