如何在React应用程序中更新document.title?

时间:2014-10-08 21:21:18

标签: javascript dom reactjs react-router

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

但是现在我需要根据异步获取的state修改标题。我开始对componentDidUpdate进行分配,但我偶尔会忘记将document.title分配到某些页面中,之前的标题会一直存在,直到我最终注意到它为止。

理想情况下,我想要一种以声明方式表达document.title的方法,而不必分配它。鉴于我希望能够在几个嵌套级别指定文档标题,某种“假”组件可能是最方便的:

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

其他要求:

  • 在child中指定的标题应覆盖父级指定的标题;
  • 可靠(保证路线更换时的清理);
  • 不应发出任何DOM(即没有组件返回{1}}的黑客;
  • 我正在使用react-router,但如果此组件也可以与其他路由器一起使用,那就更好了。

我能用什么?

5 个答案:

答案 0 :(得分:52)

我为此写了react-document-title

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

功能

  • 不会发出DOM,甚至不会发出<noscript>;
  • 与正常的React组合一样,可以使用其父级propsstate;
  • 可以在整个应用程序的许多地方定义;
  • 支持任意级别的嵌套,因此您可以定义应用程序范围和页面特定的标题;
  • 适用于客户端和服务器。

实施例

假设您使用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>
    );
  }
});

来源

我会跟踪已挂载的实例,并且只有在更新,挂载或卸载时,才会在挂载的实例堆栈中使用title给予顶部DocumentTitle。在服务器上,componentWillMount触发,但我们不会获得didMountwillUnmount,因此我们引入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;

答案 1 :(得分:20)

看看NFL的react-helmet

答案 2 :(得分:6)

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

然后<Layout title="My Title"/>这很简单!

答案 3 :(得分:4)

尝试react-frozenhead,它实际上比反应文档标题更复杂 - 它允许我们更改标题,描述和部分中的任何其他内容。

答案 4 :(得分:0)

与此同时,3年过去了! ;-)
如果你想操纵其他页面标题而不是标题(如描述,规范等),react-document-meta NPM依赖可能是一件好事。