我想为我的 React 应用程序设置文档标题（在浏览器标题栏中）。我已经尝试使用react文档标题（似乎过时了），并设置document.title在constructor与componentDidMount()这些解决方案的工作- 。
你如何在 React 中设置文档标题？
IT技术
javascript
reactjs
dom
2021-02-28 00:58:20
6个回答
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 设置 inline 为 true
你可以使用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>
...
</>
)
}
}
正如其他人所说，你可以使用document.title = 'My new title'并作出react头盔更新页面标题。这两种解决方案仍将在加载脚本之前呈现初始的“React App”标题。
如果您正在使用create-react-app的初始文档标题在设置<title>标签/public/index.html文件。
您可以直接编辑它或使用将从环境变量填充的占位符：
/.env：
REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...
如果出于某种原因我想在我的开发环境中使用不同的标题 -
/.env.development：
REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...
/public/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>%REACT_APP_SITE_TITLE%</title>
...
</head>
<body>
...
</body>
</html>
这种方法还意味着我可以使用全局process.env对象从我的应用程序中读取站点标题环境变量，这很好：
console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!
请参阅：添加自定义环境变量
从 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>
)
}
它会在组件安装后立即更新标题，并在卸载时将其恢复为之前的标题。