web-dev-qa-db-fra.com

Changer le titre du document dans React?

J'essaie de mettre à jour le titre du document dans une application React. J'ai des besoins très simples pour cela. Le titre sert essentiellement à afficher le composant Total même lorsque vous êtes sur un onglet différent.

C'était mon premier instinct:

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>
    );
  }
}

Je pensais que cela ne ferait que mettre à jour le document.title chaque fois que ce composant serait rendu, mais cela ne semble pas faire rien.

Pas sûr de ce que je manque ici. Probablement quelque chose à voir avec la façon dont React exécute cette fonction - peut-être que la variable document n'est pas disponible?

MODIFIER:

Je commence une prime pour cette question, car je n'ai toujours pas trouvé de solution. J'ai mis à jour mon code pour une version plus récente.

Un développement étrange est que le console.log _ ne imprime le titre que je cherche. Mais pour une raison quelconque, le titre réel dans l'onglet n'est pas mis à jour. Ce problème est identique sur Chrome, Safari et Firefox.

domreactjs
15
fnsjdnfksjdb

Je pense que webpack-dev-server fonctionne en mode iframe par défaut:

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

C'est peut-être pour cette raison que vos tentatives de définition du titre échouent. Essayez de définir l'option inline sur true sur webpack-dev-server, si ce n'est déjà fait.

6
Jed Richards

J'utilise maintenant react-helmet à cette fin, car il permet de personnaliser différentes balises méta et liens, et prend également en charge la 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>
)

Réponse originale: il existe en fait un package de gaeron à cet effet, mais de manière déclarative:

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

Si le paquetage react-document-title ne fonctionne pas pour vous, le moyen le plus rapide de le faire serait d'utiliser une méthode de cycle de vie, probablement à la fois componentDidMount et componentWillReceiveProps (pour en savoir plus sur ceux ici ):

Donc, vous feriez quelque chose comme:

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

Dans votre fonction componentDidMount() dans App.js (ou ailleurs), vous devez simplement:

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

Il existe un meilleur moyen de modifier dynamiquement le titre du document avec react-helmet package. 

En fait, vous pouvez modifier dynamiquement tout ce qui se trouve dans la balise <head> en utilisant react-helmet dans votre composant. 

  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

Pour changer le titre, les balises méta et les icones favoris de manière dynamique au moment de l'exécution react-helmet constitue une solution simple. Vous pouvez également le faire dans componentDidMount à l'aide de l'interface de document standard. Dans l'exemple ci-dessous, j'utilise le même code pour plusieurs sites. Helmet recherche donc le favicon et le titre d'une variable d'environnement.

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