我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
正如其他人提到的，你可以使用文档。title = 'My new title'和React Helmet来更新页面标题。这两个解决方案仍然会在脚本加载之前呈现初始的“React App”标题。
如果你使用的是create-react-app，初始文档标题设置在<title>标签/public/index.html文件中。
你可以直接编辑它，或者使用一个占位符来填充环境变量:
/.环境：
REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...
如果出于某种原因，我想在我的开发环境中使用不同的标题—
/ .env.development:
REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...
/公共/ index . html:
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>%REACT_APP_SITE_TITLE%</title>
...
</head>
<body>
...
</body>
</html>
这种方法还意味着我可以使用全局流程从应用程序读取站点标题环境变量。Env对象，这很好
console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!
参见:添加自定义环境变量
其他回答
最简单的方法是使用react-document-configuration
NPM安装react-document-configuration
例子:
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>
);
};```
你可以简单地在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
我还没有对它进行彻底的测试，但这似乎是可行的。用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>组件中，这对我来说似乎很奇怪。
通过更新文档。如果你想要一个动态标题，render()内的标题会刷新/保持最新。卸载时也应该恢复标题。传送门很可爱，但似乎没有必要;我们不需要操作任何DOM节点。
如果你是一个初学者，你可以去你的react项目文件夹的公共文件夹，在“index.html”中编辑标题，然后把你的标题放进去。别忘了保存，这样照片才会反射。
我想使用页面标题我的常见问题页面。所以我用了反应头盔。
首先，我用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 ) } }
