Question

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

Answer 1

$desiredInputs = array('username','password','etc');
$errors = [];
foreach ($desiredInputs as $input) {
    if(!isset($_POST[$input]) || empty(trim($_POST[$input])){
        $errors[] = $input.' is not set or empty';
    }
}

这适合我。

编辑：如果您正在使用webpack-dev-server设置内联为true

Answer 2

您可以使用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>
        ...
      </>
    )
  }
}

Answer 3

在React 16.13中，您可以直接在render函数中设置它：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        document.title = 'wow'
        return <p>Hello</p>
    }
}

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

对于功能组件：

function App() {
    document.title = 'wow'
    return <p>Hello</p>
}

Answer 4

您应该在＆＃39; componentWillMount＆＃39;的生命周期中设置文档标题：

componentWillMount() {
    document.title = 'your title name'
  },

Answer 5

自React 16.8起。您可以构建一个自定义的钩子来做到这一点（类似于@Shortchange的解决方案）：

export function useTitle(title) {
  useEffect(() => {
    const prevTitle = document.title
    document.title = title
    return () => {
      document.title = prevTitle
    }
  })
}

这可以在任何反应组件中使用，例如：

const MyComponent = () => {
  useTitle("New Title")
  return (
    <div>
     ...
    </div>
  )
}

一旦安装组件，它将立即更新标题，并在卸载时将其还原为上一个标题。

Answer 6

React Portals可以让您渲染到根React节点之外的元素（例如<title>），就好像它们是实际的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} />

Answer 7

您可以将以下内容与document.title = 'Home Page'

一起使用

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

快乐编码！

Answer 8

您可以使用ReactDOM并更改<title>标签

ReactDOM.render(
   "New Title",
   document.getElementsByTagName("title")[0]
);

Answer 9

对于这个问题，您有多种选择，我强烈建议您使用 React Helmet 或使用 useEffect 创建挂钩。除了编写自己的钩子，您还可以使用 react-use 中的钩子：

React Helmet

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

const MyComponent => () => (
  <Helmet>
    <title>My Title</title>
  </Helmet>
)

react-use

import React from 'react';
import { useTitle } from 'react-use';

const MyComponent = () => {
  useTitle('My Title');

  return null;
}

Answer 10

就像其他人提到的那样，您可以使用document.title = 'My new title'和React Helmet更新页面标题。在加载脚本之前，这两种解决方案仍将呈现初始的“ React App”标题。

如果您使用的是create-react-app，则在<title>标签/public/index.html文件中设置初始文档标题。

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

/.env：

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

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

/.env.development：

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

/public/index.html：

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

这种方法还意味着我可以使用全局process.env对象从应用程序中读取网站标题环境变量，这很不错：

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

请参阅：Adding Custom Environment Variables

Answer 11

const setTitle = (title) => {
  const prevTitle = document.title;
  document.title = title;
  return () => document.title = prevTitle;
}

const MyComponent = () => {
  useEffect(() => setTitle('Title while MyComponent is mounted'), []);

  return <div>My Component</div>;
}

这是我今天工作时提出的一个非常简单的解决方案。 setTitle返回一个将标题重置为使用setTitle之前的功能的函数，它在React的useEffect钩子中非常有效。

Answer 12

我还没有对它进行彻底的测试，但这似乎可行。用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>
        </>
    }
}

不确定为什么其他人热衷于将整个应用程序放入他们的<Title>组件中，这对我来说很奇怪。

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

Answer 13

只需在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

Answer 14

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

例如：

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

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

Answer 15

我使用这种方法，后来发现了它，因为它对我来说比较容易。我将其与功能组件结合使用。 仅执行此操作，如果您不在乎用户禁用页面上的Javascript不会显示任何标题。

您需要做两件事。

1。进入您的index.html并在此处删除此行

<title>React App</title>

2。进入您的mainapp函数并返回它，它只是一个普通的html结构，您可以将网站的主要内容复制并粘贴到body标签之间：

return (
        <html>
          <head>
            <title>hi</title>
          </head>
          <body></body>
        </html>
      );

您可以根据需要替换标题。

Answer 16

最简单的方法是使用 react-document-configuration

npm install react-document-configuration --save

示例：

import React from "react";
import Head from "react-document-configuration";

export default function Application() {
    return (
        <div>
            <Head title="HOME" icon="link_of_icon" />
            <div>
                <h4>Hello Developers!</h4>
            </div>
        </div>
    );
};```

Answer 17

animation-iteration-count: infinite;

Answer 18

我想在我的常见问题页面使用页面标题。所以我为此使用了 react-helmet。

首先我使用 npm i react-helmet

安装了 react-helmet

然后我在返回中添加了标签，如下所示：

import React from 'react'

import { Helmet } from 'react-helmet'


const PAGE_TITLE = 'FAQ page'


export default class FAQ extends Component {

  render () {

    return (

      
        
          { PAGE_TITLE }
        
        This is my faq page
      
    )
  }
}

Answer 19

如果您是初学者，只需将其保存到React Project文件夹的公用文件夹中，然后在“ index.html”中编辑标题并将其放入即可。不要忘记保存，它会反映出来。

如何在React中设置文档标题？

19 个答案:

React Helmet

react-use