Изменение названия документа в React?

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

Это был мой первый инстинкт:

const React = require('react');

export default class Total extends React.Component {
  shouldComponentUpdate(nextProps) {
    //otherstuff
    document.title = this.props.total.toString();
    console.log("Document title: ", document.title);
    return true;
  }
  render() {
    document.title = this.props.total;
    return (
      <div className="text-center">
        <h1>{this.props.total}</h1>
      </div>
    );
  }
}

Я думал, что это просто обновит document.title каждый раз, когда этот компонент будет отображаться, но он ничего не делает.

Не уверен, что мне здесь не хватает. Возможно, что-то связано с тем, как React запускает эту функцию - может быть, где-то переменная document недоступна?

EDIT:

Я начинаю щедрость за этот вопрос, так как я до сих пор не нашел решения. Я обновил свой код до более поздней версии.

Странная разработка заключается в том, что console.log распечатывает заголовок, который я ищу. Но по какой-то причине фактический заголовок на вкладке не обновляется. Эта проблема одинакова для Chrome, Safari и Firefox.

Ответы

Ответ 1

Я думаю, что webpack-dev-server по умолчанию работает в режиме iframe:

https://webpack.github.io/docs/webpack-dev-server.html#iframe-mode

Возможно, поэтому ваши попытки установить заголовок проваливаются. Попробуйте установить для параметра inline значение true на webpack-dev-server, если вы этого еще не сделали.

Ответ 2

Сейчас я использую реагирующий шлем для этой цели, поскольку он позволяет настраивать различные метатеги и ссылки, а также поддерживает SSR.

import { Helmet } from 'react-helmet'

const Total = () => (
  <div className="text-center">
    <Helmet>
      <meta charSet="utf-8" />
      <title>{this.props.total}</title>
    </Helmet>
    <h1>{this.props.total}</h1>
  </div>
)

Оригинальный ответ: для этого есть пакет от gaeron, но декларативно:

import React, { Component } from 'react'
import DocumentTitle from 'react-document-title'

export default class Total extends Component {

  render () {
    return (
      <DocumentTitle title={this.props.total}>
        <div className='text-center'>
          <h1>{this.props.total}</h1>
        </div>
      </DocumentTitle>
    )
  }

}

Ответ 3

Если пакет react-document-title не работает для вас, быстрый способ сделать это будет в методе жизненного цикла, возможно, как componentDidMount, так и componentWillReceiveProps (вы можете узнать больше об этих здесь):

Итак, вы бы сделали что-то вроде:

const React = require('react');

export default class Total extends React.Component {

  // gets called whenever new props are assigned to the component
  // but NOT during the initial mount/render
  componentWillReceiveProps(nextProps) {
    document.title = this.props.total;
  }

  // gets called during the initial mount/render
  componentDidMount() {
    document.title = this.props.total;
  }

  render() {    
    return (
      <div className="text-center">
        <h1>{this.props.total}</h1>
      </div>
    );
  }
}

Ответ 4

Внутри функции componentDidMount() в App.js (или где-либо еще) просто есть:

componentDidMount() {
    document.title = "Amazing Page";
}

Ответ 5

Существует лучший способ динамического изменения названия документа с помощью react-helmet.

На самом деле вы можете динамически изменять что-либо внутри тега <head>, используя react-helmet изнутри вашего компонента.

  const componentA = (props) => {
    return (
      <div>
       <Helmet>
        <title>Your dynamic document/page Title</title>
        <meta name="description" content="Helmet application" />
       </Helmet>
       .....other component content
    );
  }

Ответ 6

Динамическое изменение заголовка, мета-тегов и favicon во время выполнения react-helmet обеспечивает простое решение. Вы также можете сделать это в componentDidMount используя стандартный интерфейс документа. В приведенном ниже примере я использую один и тот же код для нескольких сайтов, поэтому шлем ищет значок и заголовок из переменной среды

import { Helmet } from "react-helmet";
import { getAppStyles } from '../relative-path';
import { env } from '../relative-path';

<Helmet>
  <meta charSet="utf-8" />
  <title>{pageTitle[env.app.NAME].title}</title>
  <link rel="shortcut icon" href={appStyles.favicon} />
</Helmet>