¿Cómo se configura el título del documento en React?

Question 1

Me gustaría establecer el título del documento (en la barra de título del navegador) para mi aplicación React. Intenté usar react-document-title (parece desactualizado) y configurar document.titleen constructory componentDidMount(), ninguna de estas soluciones funciona.

Question 2

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

Esto funciona para mi.

Editar: si está utilizando webpack-dev-server, establezca en línea en verdadero

Question 4

Para React 16.8, puede hacer esto con un componente funcional usando useEffect .

Por ejemplo:

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

Tener el segundo argumento como una matriz llama a useEffect solo una vez, lo que lo hace similar a componentDidMount.

Question 5

Como han mencionado otros, puede usar document.title = 'My new title'y React Helmet para actualizar el título de la página. Ambas soluciones aún mostrarán el título inicial de 'React App' antes de que se carguen los scripts.

Si está utilizando create-react-appel título del documento inicial , se establece en el archivo de <title>etiqueta /public/index.html.

Puede editar esto directamente o usar un marcador de posición que se completará a partir de variables ambientales:

/.env:

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

Si por alguna razón quisiera un título diferente en mi entorno de desarrollo -

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

Este enfoque también significa que puedo leer la variable de entorno del título del sitio desde mi aplicación utilizando el process.envobjeto global , lo cual es bueno:

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

Ver: Agregar variables de entorno personalizadas

Question 6

debe establecer el título del documento en el ciclo de vida de 'componentWillMount':

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

Question 7

React Portals puede permitirle renderizar elementos fuera del nodo raíz de React (como en <title>), como si fueran nodos de React reales. Así que ahora puede establecer el título de forma limpia y sin dependencias adicionales:

He aquí un ejemplo:

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;

Simplemente coloque el componente en la página y configure pageTitle:

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

Question 8

En React 16.13, puede configurarlo directamente dentro de la función de renderizado:

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

Para componente de función:

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

Question 9

Simplemente puede crear una función en un archivo js y exportarla para su uso en componentes

como abajo:

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

y utilícelo en cualquier componente como este:

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

Puede utilizar lo siguiente a continuación 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')
);

o puede usar este paquete 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')
);

Codificación feliz !!!

Question 11

No lo he probado demasiado a fondo, pero parece funcionar. Escrito en 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;
    }
}

Uso:

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

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

No estoy seguro de por qué otros están interesados en poner toda su aplicación dentro de su <Title>componente, eso me parece extraño.

Al actualizar el document.titleinterior, render()se actualizará / se mantendrá actualizado si desea un título dinámico. También debería revertir el título cuando se desmonta. Los portales son bonitos, pero parecen innecesarios; realmente no necesitamos manipular ningún nodo DOM aquí.

Question 12

Puede usar ReactDOM y alterar la <title>etiqueta

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

Question 13

Utilizo este método, que descubrí porque es más fácil para mí. Lo uso en combinación con el componente de función. Solo haga esto, si no le importa que no muestre ningún título si el usuario deshabilita Javascript en su página.

Hay dos cosas que debes hacer.

1.Vaya a su index.html y elimine esta línea aquí

<title>React App</title>

2.Vaya a la función de su aplicación principal y devuelva esto, que es solo una estructura html normal, puede copiar y pegar su contenido principal de su sitio web entre las etiquetas del cuerpo:

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

Puede reemplazar el título como desee.

Question 14

Si eres un principiante, puedes salvarte de todo eso yendo a la carpeta pública de tu carpeta del proyecto de reacción y editando el título en "index.html" y pon el tuyo. No olvide guardar para que se refleje.