我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
我还没有对它进行彻底的测试,但这似乎是可行的。用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解决方案-使用Hooks)
创建更改页面标题组件
import React, { useEffect } from "react";
const ChangePageTitle = ({ pageTitle }) => {
useEffect(() => {
const prevTitle = document.title;
document.title = pageTitle;
return () => {
document.title = prevTitle;
};
});
return <></>;
};
export default ChangePageTitle;
使用组件
import ChangePageTitle from "../{yourLocation}/ChangePageTitle";
...
return (
<>
<ChangePageTitle pageTitle="theTitleYouWant" />
...
</>
);
...
你可以简单地在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
从React 16.8开始。你可以构建一个自定义钩子来实现(类似于@Shortchange的解决方案):
export function useTitle(title) {
useEffect(() => {
const prevTitle = document.title
document.title = title
return () => {
document.title = prevTitle
}
})
}
这可以在任何react组件中使用,例如:
const MyComponent = () => {
useTitle("New Title")
return (
<div>
...
</div>
)
}
它将在组件挂载时立即更新标题,并在卸载时将其恢复到以前的标题。
我想使用页面标题我的常见问题页面。所以我用了反应头盔。
首先,我用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 ) } }
对于这个问题,你有多种选择,我强烈建议使用React Helmet或使用useEffect创建钩子。除了编写自己的钩子,你还可以使用react-use中的钩子:
反应的头盔
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;
}