wake-up-neo.net

Wie legen Sie den Dokumenttitel in React fest?

Ich möchte den Dokumenttitel (in der Titelleiste des Browsers) für meine React-Anwendung festlegen. Ich habe versucht, reag-document-title (scheint nicht mehr aktuell zu sein) und document.title in constructor und componentDidMount() einzustellen - keine dieser Lösungen funktioniert.

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

Das funktioniert für mich.

Bearbeiten: Wenn Sie den webpack-dev-server verwenden, setzen Sie Inline auf true

35
AlexVestin

Sie können auch 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>
            ...
        </>
    )
  }
}
14
quotesBro

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

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

Für React 16.8 können Sie dies mit einer Funktionskomponente tun, indem Sie seEffect verwenden.

Zum Beispiel:

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

Wenn Sie das zweite Argument als Array verwenden, wird useEffect nur einmal aufgerufen. Dies ähnelt componentDidMount.

4
Jordan Daniels

Sie können Folgendes mit document.title = 'Home Page' verwenden

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 !!!

Ich habe das nicht allzu gründlich getestet, aber das scheint zu funktionieren. In TypeScript geschrieben.

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

Verwendungszweck:

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 zu platzieren innerhalb ihrer <Title> - Komponente, das kommt mir komisch vor.

Wenn Sie den document.title In render() aktualisieren, wird er aktualisiert bzw. bleibt auf dem neuesten Stand, wenn Sie einen dynamischen Titel wünschen. Der Titel sollte wiederhergestellt werden, wenn er nicht angehängt ist. Portale sind niedlich, aber scheinen unnötig; Wir müssen hier keine DOM-Knoten wirklich manipulieren.

1
mpen

Wie bereits erwähnt, können Sie document.title = 'My new title' und React Helmet verwenden, um den Seitentitel zu aktualisieren. Bei beiden Lösungen wird immer noch der ursprüngliche "React App" -Titel ausgegeben, bevor Skripts geladen werden.

Wenn Sie create-react-app verwenden, wird der Dokumenttitel initial in der <title>-Tag /public/index.html-Datei festgelegt.

Sie können dies direkt bearbeiten oder einen Platzhalter verwenden, der mit 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 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 des Sitetitels aus meiner Anwendung mithilfe des globalen process.env-Objekts lesen kann.

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

Siehe: Benutzerdefinierte Umgebungsvariablen hinzufügen

1
Gruffy

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

0
Stanleynd

React Portals ermöglicht das Rendern von Elementen außerhalb des Root-React-Knotens (z. B. bei <title>), als wären es reale React-Nodes. Nun 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 setzen Sie pageTitle:

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

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 benutze es in irgendeiner 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
0
amin msh