it-swarm.com.ru

Изменение заголовка документа в 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.

15
fnsjdnfksjdb

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

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

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

6
Jed Richards

Сейчас я использую реагировать-шлем для этой цели, так как он позволяет настраивать различные метатеги и ссылки, а также поддерживает 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>
)

Оригинальный ответ: на самом деле для этой цели есть package by 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>
    )
  }

}
9
Balthazar

Если пакет 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>
    );
  }
}
2
rossipedia

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

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

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

На самом деле вы можете динамически изменять что-либо внутри тега <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
    );
  }
0
asmmahmud

Динамическое изменение заголовка, мета-тегов и 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>
0
Homam Bahrani