我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
如果你是一个初学者，你可以去你的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 ) } }
从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>
)
}
它将在组件挂载时立即更新标题，并在卸载时将其恢复到以前的标题。
import React from 'react';
function useTitle(title: string): void => {
React.useEffect(() => {
const prevTitle = document.title;
document.title = title;
return () => {
document.title = prevTitle;
};
}, []);
}
function MyComponent(): JSX.Element => {
useTitle('Title while MyComponent is mounted');
return <div>My Component</div>;
}
这是一个非常直接的解决方案，useTitle设置文档标题，当组件卸载时，它被重置为之前的任何内容。
你应该在'componentWillMount'的生命周期中设置文档标题:
componentWillMount() {
document.title = 'your title name'
},
钩子的更新:
useEffect(() => {
document.title = 'current Page Title';
}, []);
const [name, setName] = useState("Jan");
useEffect(() =>
{document.title = "Celebrate " + {name}.name ;}
);
