Come si imposta il titolo del documento in React?

Question 1

Vorrei impostare il titolo del documento (nella barra del titolo del browser) per la mia applicazione React. Ho provato a utilizzare react-document-title (sembra obsoleto) e l'impostazione document.titlein constructore componentDidMount()- nessuna di queste soluzioni funziona.

Question 2

Puoi usare React Helmet :

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

Question 3

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

Questo funziona per me.

Modifica: se utilizzi webpack-dev-server, imposta inline su true

Question 4

Per React 16.8, puoi farlo con un componente funzionale usando useEffect .

Per esempio:

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

Avere il secondo argomento come un array chiama useEffect solo una volta, rendendolo simile a componentDidMount.

Question 5

Come altri hanno già detto, puoi usare document.title = 'My new title'e React Helmet per aggiornare il titolo della pagina. Entrambe queste soluzioni renderanno ancora il titolo iniziale "App React" prima che gli script vengano caricati.

Se stai usando create-react-appil titolo del documento iniziale è impostato nel file <title>tag /public/index.html.

Puoi modificarlo direttamente o utilizzare un segnaposto che verrà riempito dalle variabili ambientali:

/.env:

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

Se per qualche motivo volessi un titolo diverso nel mio ambiente di sviluppo -

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

Questo approccio significa anche che posso leggere la variabile d'ambiente del titolo del sito dalla mia applicazione utilizzando l' process.envoggetto globale , il che è carino:

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

Vedere: Aggiunta di variabili d'ambiente personalizzate

Question 6

dovresti impostare il titolo del documento nel ciclo di vita di 'componentWillMount':

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

Question 7

I portali React ti consentono di eseguire il rendering su elementi esterni al nodo React radice (come at <title>), come se fossero nodi React effettivi. Quindi ora puoi impostare il titolo in modo pulito e senza dipendenze aggiuntive:

Ecco un esempio:

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;

Basta inserire il componente nella pagina e impostare pageTitle:

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

Question 8

In React 16.13, puoi impostarlo direttamente all'interno della funzione di rendering:

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

Per componente funzione:

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

Question 9

È possibile creare semplicemente una funzione in un file js ed esportarla per utilizzarla nei componenti

come sotto:

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

e usalo in qualsiasi componente come questo:

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

Question 10

È possibile utilizzare quanto segue di seguito con 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')
);

oppure Puoi usare questo pacchetto 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')
);

Codifica felice !!!

Question 11

Non l'ho testato troppo a fondo, ma sembra funzionare. Scritto 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;
    }
}

Utilizzo:

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

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

Non sono sicuro del motivo per cui gli altri desiderano inserire l'intera app all'interno dei loro <Title>componenti, mi sembra strano.

Aggiornando l' document.titleinterno render()si aggiornerà / rimarrà aggiornato se si desidera un titolo dinamico. Dovrebbe ripristinare il titolo anche quando smontato. I portali sono carini, ma sembrano inutili; non abbiamo davvero bisogno di manipolare alcun nodo DOM qui.

Question 12

Puoi usare ReactDOM e alterare il <title>tag

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

Question 13

Uso questo metodo, che ho scoperto perché per me è più facile. Lo uso in combinazione con il componente funzione. Fallo solo se non ti interessa che non visualizzi alcun titolo se l'utente disabilita Javascript sulla tua pagina.

Ci sono due cose che devi fare.

1.Vai nel tuo index.html ed elimina questa riga qui

<title>React App</title>

2.Vai nella tua funzione mainapp e restituisci questa che è solo una normale struttura html, puoi copiare e incollare il tuo contenuto principale dal tuo sito web tra i tag del corpo:

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

Puoi sostituire il titolo come desideri.

Question 14

Se sei un principiante puoi semplicemente salvarti da tutto ciò andando nella cartella pubblica della cartella del tuo progetto React, modificare il titolo in "index.html" e inserire il tuo. Non dimenticare di salvare in modo che rifletta.