Wie behalte ich document.title in der React App aktualisiert?

Schrieb ich reagieren-Dokument-Titel nur für die.

Es bietet einen deklarativen Weg zu geben document.title in einer single-page-app.

Wenn Sie möchten, um Titel auf dem server nach rendering-Komponenten zu einem string, rufen Sie DocumentTitle.rewind().

Funktionen

• Nicht emittieren DOM, nicht einmal ein <noscript>;
• Wie ein normaler Reagieren compoment, kann mit Ihren Eltern props und state;
• Kann definiert werden, in vielen Orten in der gesamten Anwendung;
• Unterstützt beliebige Ebenen verschachteln, so können Sie festlegen, app-breiten-und Seiten-spezifische Titel;
• Arbeitet auf client und server.

Beispiel

Vorausgesetzt, Sie verwenden so etwas wie reagieren-router:

var App = React.createClass({
  render: function () {
    //Use "My Web App" if no child overrides this
    return (
      <DocumentTitle title='My Web App'>
        <this.props.activeRouteHandler />
      </DocumentTitle>
    );
  }
});

var HomePage = React.createClass({
  render: function () {
    //Use "Home" while this component is mounted
    return (
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    );
  }
});

var NewArticlePage = React.createClass({
  mixins: [LinkStateMixin],

  render: function () {
    //Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title || 'Untitled'}>
        <div>
          <h1>New Article</h1>
          <input valueLink={this.linkState('title')} />
        </div>
      </DocumentTitle>
    );
  }
});

Quelle

Ich verfolgen, montiert Instanzen und verwenden Sie nur title gegeben, um die top - DocumentTitle im bereitgestellten Beispiel-stack, Wann immer es updates bekommt gemountet oder unmountet werden. Auf dem server componentWillMount feuert, aber wir nicht bekommen didMount oder willUnmount, so stellen wir DocumentTitle.rewind() dass eine Zeichenfolge zurück, und zerstört den Staat, um die Vorbereitung auf die nächste Anfrage.

var DocumentTitle = React.createClass({
  propTypes: {
    title: PropTypes.string
  },

  statics: {
    mountedInstances: [],

    rewind: function () {
      var activeInstance = DocumentTitle.getActiveInstance();
      DocumentTitle.mountedInstances.splice(0);

      if (activeInstance) {
        return activeInstance.props.title;
      }
    },

    getActiveInstance: function () {
      var length = DocumentTitle.mountedInstances.length;
      if (length > 0) {
        return DocumentTitle.mountedInstances[length - 1];
      }
    },

    updateDocumentTitle: function () {
      if (typeof document === 'undefined') {
        return;
      }

      var activeInstance = DocumentTitle.getActiveInstance();
      if (activeInstance) {
        document.title = activeInstance.props.title;
      }
    }
  },

  getDefaultProps: function () {
    return {
      title: ''
    };
  },

  isActive: function () {
    return this === DocumentTitle.getActiveInstance();
  },

  componentWillMount: function () {
    DocumentTitle.mountedInstances.push(this);
    DocumentTitle.updateDocumentTitle();
  },

  componentDidUpdate: function (prevProps) {
    if (this.isActive() && prevProps.title !== this.props.title) {
      DocumentTitle.updateDocumentTitle();
    }
  },

  componentWillUnmount: function () {
    var index = DocumentTitle.mountedInstances.indexOf(this);
    DocumentTitle.mountedInstances.splice(index, 1);
    DocumentTitle.updateDocumentTitle();
  },

  render: function () {
    if (this.props.children) {
      return Children.only(this.props.children);
    } else {
      return null;
    }
  }
});

module.exports = DocumentTitle;

InformationsquelleAutor der Antwort Dan Abramov

class Layout extends React.Component {
  constructor(props){
    super(props);
    document.title = this.props.title;
  }
  render(){
    return(
      <div>
      </div>
    );
  }
}

dann <Layout title="My Title"/> einfach!

InformationsquelleAutor der Antwort rajesh_kw

Mittlerweile, 3 Jahren gegangen! 😉

Wenn Sie ändern möchten anderen Seite Header als Titel (wie description, canonical, etc.), reagieren-Dokument-meta NPM Abhängigkeit könnte eine gute Sache zu verwenden.

InformationsquelleAutor der Antwort Pedro Ferreira