javascript – 如何在React应用程序中保留document.title? - 代码日志

javascript – 如何在React应用程序中保留document.title?

由于React没有任何内置的方式来管理document.title,所以我曾经将它设置在我的路由处理程序的componentDidMount中。

但是现在我需要根据异步获取的状态修改标题。我开始将assingments放在componentDidUpdate中,但是现在,我忘了把document.title赋值给某些页面,之前的标题就会一直挂起来,直到我终于注意到了。

理想情况下,我希望以声明方式表达document.title,而无需分配它。某些“假”组件可能是最方便的,因为我希望能够在多个嵌套级别指定文档标题:

>顶级(默认标题);
>在页面级别(对于某些页面,但不是全部);
>有时,在内部组件级别(例如,用户键入字段)。

其他要求:

>在孩子中指定的标题应该覆盖由父指定的标题;
>可靠(保证路线更换清除);
>不应发出任何DOM(即没有组件返回< noscript>的黑客);
>我正在使用反应路由器,但是如果该组件与其他路由器一起工作,那么它会更好。

我能用什么?

我为此写了react-document-title

它提供了在单页应用程序中指定document.title的声明式方法。
如果要在将组件渲染为字符串后在服务器上获取标题,请调用DocumentTitle.rewind()。

特征

>不发出DOM,甚至不是< noscript&gt ;;;
>像正常的反应组合,可以使用其父母的道具和状态;
>可以在整个应用程序的许多地方定义;
>支持任意级别的嵌套,因此您可以定义应用程序范围和页面特定的标题;
>在客户端和服务器上工作。

假设你使用像react-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>
    );
  }
});

资源

我跟踪挂载的实例,只有当它被更新,被挂载或卸载时,才使用挂载的实例堆栈中的顶部Do​​cumentTitle的标题。在服务器上,componentWillMount触发,但是我们不会得到didMount或willUnmount,所以我们引入了返回一个字符串的DocumentTitle.rewind(),并且销毁状态来准备下一个请求。

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;
http://stackoverflow.com/questions/26266675/how-do-i-keep-document-title-updated-in-react-app

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 如何在React应用程序中保留document.title?