我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
对于React 16.8,你可以使用一个使用useEffect的功能组件来做到这一点。
例如:
useEffect(() => {
document.title = "new title"
}, []);
将第二个参数作为数组只调用useEffect一次,使其类似于componentDidMount。
其他回答
对于React v18+,自定义钩子将是最简单的方法。
步骤1:创建钩子。(钩/ useDocumentTitle.js)
import { useEffect } from "react";
export const useDocumentTitle = (title) => {
useEffect(() => {
document.title = `${title} - WebsiteName`;
}, [title]);
return null;
}
步骤2:在每个具有自定义标题的页面上调用钩子。(页面/ HomePage.js)
import { useDocumentTitle } from "../hooks/useDocumentTitle";
const HomePage = () => {
useDocumentTitle("Website Title For Home Page");
return (
<>
<main>
<section>Example Text</section>
</main>
</>
);
}
export { HomePage };
也适用于动态页面,只需传递产品标题或任何您想要显示的内容。
你可以使用ReactDOM和修改<title>标签
ReactDOM.render(
"New Title",
document.getElementsByTagName("title")[0]
);
你可以使用下面的文档。title = '主页'
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')
);
编码快乐! !
如果你想知道,你可以直接在渲染函数中设置它:
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>
}
但是,这是一个不好的做法,因为它会阻塞渲染(React优先考虑渲染)。
好的做法:
类组件:
class App extends React.Component {
// you can also use componentDidUpdate() if the title is not static
componentDidMount(){
document.title = "good"
}
render() {
return <p>Hello</p>
}
}
功能组件:
function App() {
// for static title, pass an empty array as the second argument
// for dynamic title, put the dynamic values inside the array
// see: https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
useEffect(() => {
document.title = 'good'
}, []);
return <p>Hello</p>
}
对于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>
...
</>
)
}
}