如何在 React 应用中添加动态标题
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
你好呀！
上次我发帖介绍了如何使用 react-helmet 在 React 应用中添加动态标题。之后，我又找到了使用 React Hooks 实现相同功能的方法。两种方法都能解决问题，但我个人认为这种方法更简单。最终，选择权在你 :)
我们开始吧。
在这篇文章中，我将向你展示如何创建一个简单的 React Hook，为你的 Web 应用程序添加动态标题行为。
如果你还不了解 React Hooks 是什么，可以点击这里阅读所有相关信息。
这里有一个包含适用示例的仓库：GitHub 仓库
概括
- 创建一个函数来处理标题更改。
- 在应用程序的每个页面组件中使用它。
1. 创建一个函数来处理标题更改。
我们将创建一个用于更改标题的钩子，它被命名为useDocumentTitle.js：
// useDocumentTitle.js
import { useRef, useEffect } from 'react'
function useDocumentTitle(title, prevailOnUnmount = false) {
const defaultTitle = useRef(document.title);
useEffect(() => {
document.title = title;
}, [title]);
useEffect(() => () => {
if (!prevailOnUnmount) {
document.title = defaultTitle.current;
}
}, [])
}
export default useDocumentTitle
我们将使用此钩子来处理标题更改，每次标题参数更改时都会发生这种情况。
这里有一些说明：
- 此函数用于处理
prevailOnUnmount配置。 - 这是可选的，但其目的是在使用此钩子的组件卸载时保持相同的标题。
- 如果您不想使用它，则默认值为
false。
我们来看看如何使用它
2. 在应用程序的每个页面组件中使用它。
在这个例子中，我们将看到两种情况：一种是简单的情况，另一种是复杂的情况。
我们来看一个简单的例子：
// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'
function Page(props) {
return <h2>{props.content}</h2>
}
function Home() {
useDocumentTitle('Home title 👻')
return <Page content='This is Home! ' />
}
function About() {
useDocumentTitle('About title 👽')
return <Page content='About!' />
}
function Other() {
useDocumentTitle('Other title 👾')
return <Page content='And this is Other!' />
}
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
<li>
<Link to='/other'>Other</Link>
</li>
</ul>
<hr />
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/other' component={Other} />
</div>
</Router>
)
}
export default App
如您所见，每个组件都使用了useDocumentTitle钩子。这是管理标题更改的最简单方法。
这里有一些说明：
- 我们使用它
react-router来处理应用程序的多个页面。 - 每个页面组件都有一个
useDocumentTitle执行过程。 - 每次组件挂载时，标题都会改变。
- 您可以在这里查看实时示例。
Open In New Window为了看得更清楚，请选择显示标题更改的选项。
不妨换个角度，用稍微复杂一点的方法看看。
// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'
function Page(props) {
const titlePrefix = 'AppName 🤠 | '
useDocumentTitle(`${titlePrefix}${props.title}`)
return <h2>{props.content}</h2>
}
function Home() {
return <Page content='This is Home!' title='Home Title 👻' />
}
function About() {
return <Page content='About!' title='About title 👽' />
}
function Other() {
return <Page content='And this is Other!' title='Other title 👾' />
}
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
<li>
<Link to='/other'>Other</Link>
</li>
</ul>
<hr />
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/other' component={Other} />
</div>
</Router>
)
}
export default App
如您所见，只有一个组件调用Page了钩子。这样，我们就将每个prop页面上的标题作为参数传递，该Page组件使用该参数来更改标题。
这里有一些说明：
react-router与简单示例相比，我们使用相同的结构来处理应用程序的多个页面。- 我们有一个集中执行的组件
useDocumentTitle。 - 这个
Page组件新增了一个功能，叫做titlePrefix“这个值”，它可以让您在每次标题更改时设置一个前缀（标题前的文本）。 - 这完全是可选的，但了解它并尝试一下也很有趣。
- 您可以在这里查看实时示例。
Open In New Window为了看得更清楚，请选择显示标题更改的选项。
就这些了。感谢阅读，祝您编程愉快！
文章来源：https://dev.to/luispa/how-to-add-a-dynamic-title-on-your-react-app-1l7k