web-dev-qa-db-fra.com

Comment définir le titre du document dans React?

Je souhaite définir le titre du document (dans la barre de titre du navigateur) pour mon application React. J'ai essayé d'utiliser react-document-title (semble obsolète) et de régler document.title dans les constructor et componentDidMount() - aucune de ces solutions ne fonctionne.

javascriptreactjsdom
15
eli
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')
);

Cela fonctionne pour moi.

Edit: Si vous utilisez webpack-dev-server, définissez inline sur true

35
AlexVestin

Vous pouvez utiliser React Helmet ainsi:

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>
            ...
        </>
    )
  }
}
14
quotesBro

vous devez définir le titre du document dans le cycle de vie de 'composantWillMount':

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

Vous pouvez utiliser ce qui suit ci-dessous avec 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')
);

ou Vous pouvez utiliser ce package 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')
);

Bonne codage !!!

2
EsterlingAccime Youtuber

Comme d'autres l'ont mentionné, vous pouvez utiliser document.title = 'My new title' et React Helmet pour mettre à jour le titre de la page. Les deux solutions restitueront toujours le titre initial de "React App" avant le chargement des scripts.

Si vous utilisez create-react-app, le titre du document initial est défini dans le fichier <title> tag /public/index.html.

Vous pouvez le modifier directement ou utiliser un espace réservé qui sera rempli à partir de variables environnementales:

/.env:

REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...

Si pour une raison quelconque je voulais un titre différent dans mon environnement de développement -

/.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>

Cette approche signifie également que je peux lire la variable environnementale de titre de site depuis mon application à l'aide de l'objet global process.env, qui est Nice:

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

Voir: Ajout de variables d'environnement personnalisées

1
Gruffy

React Portals peut vous permettre de restituer des éléments en dehors du noeud React racine (tel que <title>), comme s'il s'agissait de noeuds React réels. Alors maintenant, vous pouvez définir le titre proprement et sans aucune dépendance supplémentaire:

Voici un exemple:

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;

Il suffit de placer le composant dans la page et de définir pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
0
Colonel Thirty Two