我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
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
其他回答
你可以使用ReactDOM和修改<title>标签
ReactDOM.render(
"New Title",
document.getElementsByTagName("title")[0]
);
从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>
)
}
它将在组件挂载时立即更新标题，并在卸载时将其恢复到以前的标题。
你可以创建TabTittleHelper.js和
export const TabTittle = (newTitle) => {
document.title=newTitle;
return document.title;
};
后来你编写了所有的屏幕
TabTittle('tittleName');
我还没有对它进行彻底的测试，但这似乎是可行的。用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 16.8+，你可以在函数组件中使用Effect Hook:
import React, { useEffect } from 'react';
function Example() {
useEffect(() => {
document.title = 'My Page Title';
}, []);
}
要以声明的方式管理所有有效的头部标签，包括<title>，你可以使用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>
...
</>
)
}
}
