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 définir document.title dans les constructor et componentDidMount() - aucune de ces solutions ne fonctionne.
Réponses
Trop de publicités?
quotesBro
Points
1787
Vous pouvez utiliser le casque React :
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>
...
</>
)
}
}
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
Gruffy
Points
78
Comme d'autres l'ont mentionné, vous pouvez utiliser document.title = 'My new title' et Réagir Casque de mettre à jour le titre de la page. Ces deux solutions seront tout de même rendre la Réagir App' titre avant de scripts sont chargés.
Si vous utilisez create-react-app l' initiale du titre du document est défini dans l' <title> tag /public/index.html le fichier.
Vous pouvez le modifier directement ou utiliser un espace réservé qui sera rempli à partir des variables d'environnement:
/.env:
REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...
Si, pour une raison que 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 aussi que je peux lire le titre du site variable d'environnement à partir de mon application en utilisant le global process.env de l'objet, ce qui est agréable:
console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!
Alvin
Points
117
Colonel Thirty Two
Points
3617
Les portails React peuvent vous permettre de rendre des éléments en dehors du nœud React racine (tels que <title> ), comme s'il s'agissait de nœuds 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} />
