Comment puis-je garder document.titre mis à jour à Réagir application?

J'ai écrit réagissent-document-titre juste pour ça.

Il fournit de manière déclarative pour spécifier document.title dans une single page app.

Si vous souhaitez obtenir de titre sur le serveur après avoir rendu les composants de la chaîne, appel DocumentTitle.rewind().

Caractéristiques

• N'émet pas de DOM, pas même une <noscript>;
• Comme un normal de Réagir composant, pouvez utiliser l'un de ses parents props et state;
• Peut être définie dans de nombreux endroits tout au long de l'application;
• Prend en charge arbitraire de niveaux d'imbrication, de sorte que vous pouvez définir l'application à l'échelle et à certaines pages de titres;
• Fonctionne sur le client et le serveur.

Exemple

En supposant que vous utilisez quelque chose comme réagir-routeur:

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

Source

Je garder la trace de montée cas et uniquement utiliser title donné vers le haut DocumentTitle dans la montée de l'instance de la pile à chaque fois qu'il se met à jour, est monté ou démonté. Sur le serveur, componentWillMount des feux mais on n'obtient pas didMount ou willUnmount, si nous introduisons DocumentTitle.rewind() qui retourne une chaîne de caractères et détruit l'état de préparation de la prochaine demande.

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;

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

et puis <Layout title="My Title"/> facile!

Pendant ce temps, 3 ans se sont écoulés! 😉

Si vous voulez manipuler les autres en-têtes de page de titre (comme la description, canonique, etc.), réagir-document-meta MNP de la dépendance pourrait être une bonne chose à utiliser.