javascript-如何在React中设置文档标题?

我想为我的React应用程序设置文档标题(在浏览器标题栏中)。 我尝试使用react-document-title(似乎已过期)并在constructorcomponentDidMount()中设置document.title-这些解决方案均无效。

eli asked 2020-02-11T20:36:59Z
10个解决方案
71 votes
import React from 'react'
import ReactDOM from 'react-dom'


class Doc extends React.Component{
  componentDidMount(){
    document.title = "dfsdfsdfsd"
  }

  render(){
    return(
      <b> test </b>
    )
  }
}

ReactDOM.render(
  <Doc />,
  document.getElementById('container')
);

这对我有用。

编辑:如果您使用的是webpack-dev-server,请将内联设置为true

AlexVestin answered 2020-02-11T20:37:44Z
35 votes

您可以使用React Helmet:

import React from 'react'
import { Helmet } from 'react-helmet'

const TITLE = 'My Page Title'

class MyComponent extends React.PureComponent {
  render () {
    return (
      <>
        <Helmet>
          <title>{ TITLE }</title>
        </Helmet>
        ...
      </>
    )
  }
}
quotesBro answered 2020-02-11T20:37:20Z
9 votes

您应该在'componentWillMount'的生命周期中设置文档标题:

componentWillMount() {
    document.title = 'your title name'
  },
Alvin answered 2020-02-11T20:38:04Z
5 votes

如其他人所述,您可以使用process.env和React Helmet更新页面标题。 在加载脚本之前,这两种解决方案仍将呈现初始的“ React App”标题。

如果使用的是process.env,则初始文档标题将在<title>标签/public/index.html文件中设置。

您可以直接对其进行编辑,也可以使用将由环境变量填充的占位符:

process.env

REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...

如果出于某种原因我想要在开发环境中使用其他标题-

process.env

REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...

process.env:

<!DOCTYPE html>
<html lang="en">
    <head>
         ...
         <title>%REACT_APP_SITE_TITLE%</title>
         ...
     </head>
     <body>
         ...
     </body>
</html>

这种方法还意味着我可以使用全局2743339894402702712576对象从应用程序中读取站点标题环境变量,这很不错:

console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!

请参阅:添加自定义环境变量

Gruffy answered 2020-02-11T20:39:56Z
5 votes

React Portal可以让您渲染到根React节点之外的元素(例如pageTitle),就好像它们是实际的React节点一样。 因此,现在您可以干净地设置标题,而无需任何其他依赖项:

这是一个例子:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Title extends Component {
    constructor(props) {
        super(props);
        this.titleEl = document.getElementsByTagName("title")[0];
    }

    render() {
        let fullTitle;
        if(this.props.pageTitle) {
            fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
        } else {
            fullTitle = this.props.siteTitle;
        }

        return ReactDOM.createPortal(
            fullTitle || "",
            this.titleEl
        );
    }
}
Title.defaultProps = {
    pageTitle: null,
    siteTitle: "Your Site Name Here",
};

export default Title;

只需将组件放在页面中并设置pageTitle

<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
Colonel Thirty Two answered 2020-02-11T20:40:25Z
5 votes

对于React 16.8,您可以使用useEffect对功能组件进行此操作。

例如:

useEffect(() => {
   document.title = "new title"
}, []);

将第二个参数作为数组使用时,只会调用useEffect一次,使其类似于componentDidMount

Jordan Daniels answered 2020-02-11T20:40:54Z
2 votes

您可以将以下内容与npm i react-document-title结合使用

import React from 'react'
import { Component } from 'react-dom'


class App extends Component{
  componentDidMount(){
    document.title = "Home Page"
  }

  render(){
    return(
      <p> Title is now equal to Home Page </p>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

或者您可以使用此npm包npm i react-document-title

import React from 'react'
import { Component } from 'react-dom'
import DocumentTitle from 'react-document-title';


class App extends Component{


  render(){
    return(
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

快乐编码!

EsterlingAccime Youtuber answered 2020-02-11T20:41:23Z
1 votes

我还没有对它进行彻底的测试,但这似乎可行。 用TypeScript编写。

interface Props {
    children: string|number|Array<string|number>,
}

export default class DocumentTitle extends React.Component<Props> {

    private oldTitle: string = document.title;

    componentWillUnmount(): void {
        document.title = this.oldTitle;
    }

    render() {
        document.title = Array.isArray(this.props.children) ? this.props.children.join('') : this.props.children;
        return null;
    }
}

用法:

export default class App extends React.Component<Props, State> {

    render() {
        return <>
            <DocumentTitle>{this.state.files.length} Gallery</DocumentTitle>
            <Container>
                Lorem ipsum
            </Container>
        </>
    }
}

不知道为什么其他人热衷于将整个应用程序放在document.title组件中,这对我来说很奇怪。

通过更新render()中的document.title,如果您要使用动态标题,它将刷新/保持最新状态。 卸载后,它也应该还原标题。 门户网站很可爱,但似乎没有必要。 我们实际上不需要在这里操纵任何DOM节点。

mpen answered 2020-02-11T20:41:58Z
0 votes

您只需在js文件中创建一个函数并将其导出以供组件使用

如下所示:

export default function setTitle(title) {
  if(typeof title !== "string")
     throw new Error("Title should be an string");
     document.title = title;
}

并在以下任何组件中使用它:

import React, { Component } from 'react';

import setTitle from './setTitle.js' // no need to js extension at the end


class App extends Component {

  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App
amin msh answered 2020-02-11T20:42:27Z
-1 votes

如果您是初学者,则可以通过进入react project文件夹的公共文件夹并在“ index.html”中编辑标题并将其放在您自己的文件夹中,从而摆脱所有麻烦。 不要忘记保存,它会反映出来。

Stanleynd answered 2020-02-11T20:42:48Z
translate from https://stackoverflow.com:/questions/46160461/how-do-you-set-the-document-title-in-react