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

Answer 1

107

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.

javascript reactjs dom eli
fuente

¿fuera de plazo? @DanAbramov Supongo que react-document-title también funciona bien con React16.

JS dev

Confirmo, react-document-title funciona muy bien con react 16.5

Jo-Go

Answer 2

¿fuera de plazo? @DanAbramov Supongo que react-document-title también funciona bien con React16.

JS dev

Answer 3

Confirmo, react-document-title funciona muy bien con react 16.5

Jo-Go

Answer 4

82

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

quotesBro
fuente

esto "mostrará" el contenido del index.html en el primer segundo, ¿verdad?

nxmohamad

3

Esta debería ser definitivamente la mejor respuesta. Es una excelente forma declarativa de administrar el título y otros meta atributos

Ryall

Answer 5

esto "mostrará" el contenido del index.html en el primer segundo, ¿verdad?

nxmohamad

Answer 6

3

Esta debería ser definitivamente la mejor respuesta. Es una excelente forma declarativa de administrar el título y otros meta atributos

Ryall

Answer 7

113

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

AlexVestin
fuente

4

Esto funciona, pero el título del documento sigue siendo "React App" mientras se carga la página. ¿Alguna idea de cómo solucionarlo?

eli

7

Cambie el contenido de la etiqueta del título en su index.html

AlexVestin

4

Es mejor hacerlo declarativamente como en la respuesta de @ quotesBro

Ryall

1

¿Está bien esto para SEO?

Davidm176

@AlexVestin No es una buena idea si necesita diferentes títulos para diferentes vistas en su aplicación React

Kevin

Answer 8

4

Esto funciona, pero el título del documento sigue siendo "React App" mientras se carga la página. ¿Alguna idea de cómo solucionarlo?

eli

Answer 9

7

Cambie el contenido de la etiqueta del título en su index.html

AlexVestin

Answer 10

4

Es mejor hacerlo declarativamente como en la respuesta de @ quotesBro

Ryall

Answer 11

1

¿Está bien esto para SEO?

Davidm176

Answer 12

@AlexVestin No es una buena idea si necesita diferentes títulos para diferentes vistas en su aplicación React

Kevin

Answer 13

51

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.

Jordan Daniels
fuente

¿Cómo se puede probar esto con broma y enzima?

nickstaroba

Answer 14

¿Cómo se puede probar esto con broma y enzima?

nickstaroba

Answer 15

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

Answer 16

Asegúrese de colocar los archivos .env al mismo nivel que su archivo package.json. :)

Ian Smith

Answer 17

10

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

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

Alvin
fuente

7

componentWillMount () está obsoleto en la última versión de reacción 16

Hemadri Dasari

3

En este caso, como en la mayoría de los casos, cuando tenga que eliminar el componente obsoletoWillMount, mueva su código a componentDidMount

Jo-Go

Answer 18

7

componentWillMount () está obsoleto en la última versión de reacción 16

Hemadri Dasari

Answer 19

3

En este caso, como en la mayoría de los casos, cuando tenga que eliminar el componente obsoletoWillMount, mueva su código a componentDidMount

Jo-Go

Answer 20

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

Answer 21

Vaya, parece tan prometedor, React Helmet y document.title funcionan, pero esto es increíble :) Gracias

mamsoudi

Answer 22

Me encantó esta solución hasta que me di cuenta de que simplemente se agrega fullTitleal contenido que ya se encuentra en index.html <title>Default Title</title>.

JWess

Answer 23

Simplemente elimine el título predeterminado en su módulo (¡no en constructor!) `` Import React from 'react'; importar PropTypes de 'prop-types'; importar ReactDOM desde 'react-dom'; const titleNode = document.getElementsByTagName ("título") [0]; titleNode.innerText = ''; exportar clase predeterminada El título extiende React.PureComponent {static propTypes = {children: PropTypes.node,}; constructor (props) {super (props); this.el = titleNode; } render () {return ReactDOM.createPortal (this.props.children, this.el,); }} ``

Anatoliy Litinskiy

Answer 24

9

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

M Imam Pratama
fuente

1

Este es un error típico que aparece en muchas bases de código de reacción: ¡NO HAGA ESO! Todos los métodos de renderización deben ser funciones puras (sin efectos secundarios), si necesita realizar un efecto secundario: useEffect para componentes funcionales o eventos de componentes en clases (más información: reddit.com/r/reactjs/comments/8avfej/… )

Elias Platek

Answer 25

1

Este es un error típico que aparece en muchas bases de código de reacción: ¡NO HAGA ESO! Todos los métodos de renderización deben ser funciones puras (sin efectos secundarios), si necesita realizar un efecto secundario: useEffect para componentes funcionales o eventos de componentes en clases (más información: reddit.com/r/reactjs/comments/8avfej/… )

Elias Platek

Answer 26

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

Answer 27

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

Answer 28

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

Answer 29

2

Puede usar ReactDOM y alterar la <title>etiqueta

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

reza moradi
fuente

Answer 30

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.

Answer 31

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.

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

Respuestas: