Modifica del titolo del documento in React?

Sto tentando di aggiornare il titolo del documento in un'app React. Ho dei bisogni molto semplici per questo. Il titolo è essenzialmente utilizzato per mettere il componente Total sul display anche quando ci si trova in una scheda diversa.Modifica del titolo del documento in React?

Questo è stato il mio primo istinto:

const React = require('react'); 

export default class Total extends React.Component { 
    shouldComponentUpdate(nextProps) { 
    //otherstuff 
    document.title = this.props.total.toString(); 
    console.log("Document title: ", document.title); 
    return true; 
    } 
    render() { 
    document.title = this.props.total; 
    return (
     <div className="text-center"> 
     <h1>{this.props.total}</h1> 
     </div> 
    ); 
    } 
}

ho pensato che questo sarebbe solo aggiornare la document.title ogni volta che questo componente è stato reso, ma non sembra di fare nulla .

Non so cosa mi manca qui. Probabilmente qualcosa ha a che fare con come React esegue questa funzione, forse da qualche parte che la variabile document non è disponibile?

EDIT:

sto iniziando una taglia per questa domanda, in quanto non ho ancora trovato alcuna soluzione. Ho aggiornato il mio codice a una versione più recente.

Uno sviluppo strano è che il console.logfa stampare il titolo che sto cercando. Ma per qualche motivo, il titolo attuale nella scheda non viene aggiornato. Questo problema è lo stesso su Chrome, Safari e Firefox.

fonte

2016-01-17 fnsjdnfksjdb

Stai facendo rendering universale? Qualche errore nella console? –

Non appare nulla nella console. E onestamente, non so cosa intendi con "resa universale". Sto eseguendo il rendering esclusivamente in-browser, usando 'ReactDOM.render'. – fnsjdnfksjdb

Forse una domanda stupida, ma poi la tua situazione sembra sconcertante ... Per caso, la tua pagina ha dei frame? Fai un'altra cosa, nel tuo codice componente, registra il risultato di '(window == top)' per favore. – hazardous

Penso webpack-dev-server viene eseguito in una modalità iframe per impostazione predefinita:

https://webpack.github.io/docs/webpack-dev-server.html#iframe-mode

modo che possa essere il motivo per cui i vostri tentativi di impostare il titolo non riescono. Prova a impostare l'opzione inline su true su webpack-dev-server, se non lo hai già fatto.

fonte

2016-02-05 13:12:21 WildService

Dammi quel dolce dono, dannazione! :) – WildService

e mi chiedevo perché ti chiamano WILDservice –

In realtà c'è un package da gaeron per questo scopo, ma in modo dichiarativo:

npm install --save react-document-title

import React, { Component } from 'react' 
import DocumentTitle from 'react-document-title' 

export default class Total extends Component { 

    render() { 
    return (
     <DocumentTitle title={this.props.total}> 
     <div className='text-center'> 
      <h1>{this.props.total}</h1> 
     </div> 
     </DocumentTitle> 
    ) 
    } 

}

fonte

2016-01-17 01:34:11

Ho dato a questo uno scatto, ma non funziona. 'this.props.total' è un numero, quindi all'inizio ho ricevuto un errore relativo a questo. Ma ora è risolto e fallisce silenziosamente. Il titolo del documento non si aggiorna. – fnsjdnfksjdb

Hum, come servite la vostra applicazione, usando il webpack? –

Quello che intuisco è che 'document.title' non è supportato nel proprio ambiente (come ad esempio quando si è in un file: // protocollo) –

Se il pacchetto react-document-title non funziona per voi, il quick'n'dirty modo per farlo sarebbe in un metodo di ciclo di vita, probabilmente sia componentDidMount e componentWillReceiveProps (si può leggere di più su quelli here):

Così si farebbe qualcosa di simile:

const React = require('react'); 

export default class Total extends React.Component { 

    // gets called whenever new props are assigned to the component 
    // but NOT during the initial mount/render 
    componentWillReceiveProps(nextProps) { 
    document.title = this.props.total; 
    } 

    // gets called during the initial mount/render 
    componentDidMount() { 
    document.title = this.props.total; 
    } 

    render() {  
    return (
     <div className="text-center"> 
     <h1>{this.props.total}</h1> 
     </div> 
    ); 
    } 
}

fonte

2016-01-17 06:54:42 rossipedia

Devo essere in esecuzione in qualche problema più grande, in quanto inoltre non funziona. Ho provato a mettere un 'console.log' in loro, e le funzioni sono in esecuzione, ma per qualche ragione' document.title = something' non funziona. – fnsjdnfksjdb

C'è un modo migliore per cambiare dinamicamente il titolo del documento con il pacchetto react-helmet.

In effetti è possibile modificare dinamicamente qualsiasi cosa all'interno del tag <head> utilizzando react-helmet all'interno del componente.

const componentA = (props) => { 
    return (
     <div> 
     <Helmet> 
     <title>Your dynamic document/page Title</title> 
     <meta name="description" content="Helmet application" /> 
     </Helmet> 
     .....other component content 
    ); 
    }

fonte

2017-12-27 22:48:06 asmmahmud

Modifica del titolo del documento in React?

risposta

Problemi correlati