Question

我试图在React应用中更新文档的标题。我对此有非常简单的需求。标题主要用于显示UIEvent?组件，即使您在其他标签页上也是如此。

这是我的第一直觉：

Total

我认为这只会在每次渲染此组件时更新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> ); } }，但它似乎没有任何。

不确定我在这里失踪了什么。可能与React如何运行此函数有关 - 也许某个地方document.title变量不可用？

修改

我为这个问题开始赏金，因为我还没有找到任何解决方案。我已将我的代码更新为更新版本。

一个奇怪的发展是document 打印出我正在寻找的标题。但由于某种原因，标签中的实际标题不会更新。这个问题在Chrome，Safari和Firefox中都是一样的。

Answer 1

我现在使用react-helmet来实现此目的，因为它允许自定义不同的元标记和链接，并且它还支持SSR。

import { Helmet } from 'react-helmet'

const Total = () => (
  <div className="text-center">
    <Helmet>
      <meta charSet="utf-8" />
      <title>{this.props.total}</title>
    </Helmet>
    <h1>{this.props.total}</h1>
  </div>
)

原始答案：为此目的，gaeron实际上有一个package，但是以声明的方式：

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

}

Answer 2

我认为默认情况下webpack-dev-server以iframe模式运行：

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

因此，这可能是您尝试设置标题失败的原因。如果您还没有inline，请尝试将webpack-dev-server选项设置为true。

Answer 3

如果react-document-title包不适合您，那么快速执行此操作的方法将采用生命周期方法，可能是componentDidMount和componentWillReceiveProps（您可以阅读更多关于here}的信息：

所以你会做类似的事情：

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

Answer 4

在componentDidMount()（或任何地方）的App.js功能中，只需：

componentDidMount() {
    document.title = "Amazing Page";
}

Answer 5

有一种更好的方法可以使用react-helmet包动态更改文档标题。

事实上，您可以使用组件内的<head>动态更改react-helmet标记内的任何内容。

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

Answer 6

要在运行时动态更改标题，元标记和网站图标react-helmet提供了一种简单的解决方案。您也可以使用标准文档界面在componentDidMount中进行此操作。在下面的示例中，我对多个站点使用相同的代码，因此头盔从环境变量中查找图标和标题

import { Helmet } from "react-helmet";
import { getAppStyles } from '../relative-path';
import { env } from '../relative-path';

<Helmet>
  <meta charSet="utf-8" />
  <title>{pageTitle[env.app.NAME].title}</title>
  <link rel="shortcut icon" href={appStyles.favicon} />
</Helmet>

在React中更改文档标题？

6 个答案: