Wie legen Sie den Dokumenttitel in React fest?

104

Ich möchte den Dokumenttitel (in der Titelleiste des Browsers) für meine React-Anwendung festlegen. Ich habe versucht, den Titel des Reaktionsdokuments zu verwenden (scheint veraltet zu sein) und document.titledas constructorund componentDidMount()einzustellen - keine dieser Lösungen funktioniert.

javascript reactjs dom eli
quelle

veraltet? @DanAbramov Ich denke, React-Document-Title funktioniert auch gut mit React16.

Vishal Gulati

Ich bestätige, React-Document-Titel funktioniert gut mit React 16.5

Jo-Go

80

Sie können React Helmet verwenden :

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

QuotesBro
quelle

Dadurch wird der Inhalt der index.html in der ersten Sekunde "geflasht", oder?

Nxmohamad

2

Dies sollte definitiv die beste Antwort sein. Es ist eine ausgezeichnete deklarative Möglichkeit, den Titel und andere Meta-Attribute zu verwalten

Ryall

110

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

Das funktioniert bei mir.

Bearbeiten: Wenn Sie den Webpack-Dev-Server verwenden, setzen Sie inline auf true

AlexVestin
quelle

4

Dies funktioniert, aber der Dokumenttitel lautet immer noch "App reagieren", während die Seite geladen wird. Haben Sie eine Idee, wie Sie das beheben können?

Eli

7

Ändern Sie den Inhalt des Titel-Tags in Ihrer index.html

AlexVestin

4

Besser deklarativ wie in der Antwort von @ quoteBro

Ryall

1

Ist das für SEO in Ordnung?

Davidm176

@AlexVestin Keine gute Idee, wenn Sie unterschiedliche Titel für unterschiedliche Ansichten in Ihrer React-Anwendung benötigen

Kevin

45

Für React 16.8 können Sie dies mit einer Funktionskomponente mithilfe von useEffect tun .

Beispielsweise:

useEffect(() => {
   document.title = "new title"
}, []);

Wenn das zweite Argument als Array verwendet wird, wird useEffect nur einmal aufgerufen, wodurch es ähnlich wird componentDidMount.

Jordan Daniels
quelle

Wie kann dies mit Scherz und Enzym getestet werden?

Nickstaroba

16

Wie bereits erwähnt, können Sie den Helm verwenden document.title = 'My new title'und darauf reagieren aktualisieren. Beide Lösungen rendern weiterhin den ursprünglichen Titel "React App", bevor Skripte geladen werden.

Wenn Sie create-react-appden ursprünglichen Dokumenttitel verwenden, wird dieser im <title>Tag festgelegt/public/index.html Datei festgelegt.

Sie können dies direkt bearbeiten oder einen Platzhalter verwenden, der aus Umgebungsvariablen gefüllt wird:

/.env::

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

Wenn ich aus irgendeinem Grund einen anderen Titel in meiner Entwicklungsumgebung haben wollte -

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

Dieser Ansatz bedeutet auch, dass ich die Umgebungsvariable für den Site-Titel aus meiner Anwendung mithilfe des globalen process.envObjekts lesen kann. Das ist sehr schön:

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

Siehe: Hinzufügen benutzerdefinierter Umgebungsvariablen

Gruffy
quelle

Stellen Sie sicher, dass sich die .env-Dateien auf derselben Ebene wie Ihre package.json-Datei befinden. :)

Ian Smith

10

Sie sollten den Dokumenttitel im Lebenszyklus von 'componentWillMount' festlegen:

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

Alvin
quelle

7

componentWillMount () ist in der neuesten Reaktionsversion 16

Hemadri Dasari

3

In diesem Fall, wie in den meisten Fällen, wenn Sie veraltete componentWillMount entfernen müssen, verschieben Sie Ihren Code um

Jo-Go

9

Mit React Portals können Sie Elemente außerhalb des Root-React-Knotens (z <title>. B. at ) rendern , als wären sie tatsächliche React-Knoten. Jetzt können Sie den Titel sauber und ohne zusätzliche Abhängigkeiten festlegen:

Hier ist ein Beispiel:

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;

Fügen Sie einfach die Komponente in die Seite ein und stellen Sie Folgendes ein pageTitle:

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />

Oberst zweiunddreißig
quelle

Wow, sieht so vielversprechend aus, React Helmet und document.title funktionieren beide, aber das ist großartig :) Danke

mamsoudi

Ich habe diese Lösung geliebt, bis mir klar wurde, dass sie nur fullTitlean den Inhalt angehängt wird , der bereits in index.html enthalten ist <title>Default Title</title>.

JWess

Entfernen Sie einfach den Standardtitel in Ihrem Modul (nicht in constructor!). PropTypes aus 'Prop-Typen' importieren; ReactDOM aus 'react-dom' importieren; const titleNode = document.getElementsByTagName ("title") [0]; titleNode.innerText = ''; Standardklasse exportieren Titel erweitert React.PureComponent {static propTypes = {children: PropTypes.node,}; Konstruktor (Requisiten) {Super (Requisiten); this.el = titleNode; } render () {return ReactDOM.createPortal (this.props.children, this.el,); }} `` `

Anatoliy Litinskiy

7

In React 16.13 können Sie es direkt in der Renderfunktion festlegen:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

Für Funktionskomponente:

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

M Imam Pratama
quelle

1

Dies ist ein typischer Fehler, der in vielen Reaktionscodebasen auftritt: TUN SIE DAS NICHT! Alle Rendermethoden sollten reine Funktionen sein (keine Nebenwirkungen), wenn Sie einen Nebeneffekt ausführen müssen: useEffect für Funktionskomponenten oder Komponentenereignisse in Klassen (weitere Informationen: reddit.com/r/reactjs/comments/8avfej/… )

Elias Platek

6

Sie können einfach eine Funktion in einer js-Datei erstellen und für die Verwendung in Komponenten exportieren

Wie unten:

export default function setTitle(title) {
  if (typeof title !== "string") {
     throw new Error("Title should be an string");
  }
  document.title = title;
}

und verwenden Sie es in einer Komponente wie dieser:

import React, { Component } from 'react';
import setTitle from './setTitle.js' // no need to js extension at the end

class App extends Component {
  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App

amin msh
quelle

2

Sie können Folgendes unten mit verwenden 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')
);

oder Sie können dieses npm-Paket verwenden 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')
);

Viel Spaß beim Codieren !!!

EsterlingAccime Youtuber
quelle

2

Ich habe das nicht zu gründlich getestet, aber das scheint zu funktionieren. Geschrieben in TypeScript.

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

Verwendung:

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

Ich bin mir nicht sicher, warum andere daran interessiert sind, ihre gesamte App in ihre <Title>Komponente zu integrieren. Das kommt mir komisch vor.

Durch die Aktualisierung des document.titleInneren wird render()es aktualisiert / auf dem neuesten Stand gehalten, wenn Sie einen dynamischen Titel wünschen. Es sollte den Titel zurücksetzen, wenn es auch nicht gemountet ist. Portale sind süß, scheinen aber unnötig; Wir müssen hier keine DOM-Knoten manipulieren.

mpen
quelle

1

Sie können ReactDOM verwenden und das <title>Tag ändern

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);

reza moradi
quelle

0

Ich benutze diese Methode, die ich herausgefunden habe, da sie für mich einfacher ist. Ich benutze es in Kombination mit Funktionskomponente. Tun Sie dies nur, wenn Sie sich nicht darum kümmern, dass kein Titel angezeigt wird, wenn der Benutzer Javascript auf Ihrer Seite deaktiviert.

Es gibt zwei Dinge, die Sie tun müssen.

1. Gehen Sie in Ihre index.html und löschen Sie diese Zeile hier

<title>React App</title>

2.Gehen Sie in Ihre Hauptanwendungsfunktion und geben Sie diese zurück, die nur eine normale HTML-Struktur ist. Sie können Ihren Hauptinhalt von Ihrer Website kopieren und zwischen den Body-Tags einfügen:

return (
        <html>
          <head>
            <title>hi</title>
          </head>
          <body></body>
        </html>
      );

Sie können den Titel nach Belieben ersetzen.

Makusium
quelle

-7

Wenn Sie ein Anfänger sind, können Sie sich einfach vor all dem retten, indem Sie in den öffentlichen Ordner Ihres React-Projektordners gehen und den Titel in "index.html" bearbeiten und Ihren Titel einfügen. Vergessen Sie nicht zu speichern, damit es reflektiert wird.

Stanleynd
quelle

Wie legen Sie den Dokumenttitel in React fest?

Antworten: