我想为我的React应用程序设置文档标题(在浏览器标题栏中)。我尝试使用react-document-title(似乎过时了)和设置文档。在构造函数和componentDidMount()中的title -这些解决方案都不起作用。
当前回答
对于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>
...
</>
)
}
}
其他回答
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
对于这个问题，你有多种选择，我强烈建议使用React Helmet或使用useEffect创建钩子。除了编写自己的钩子，你还可以使用react-use中的钩子:
反应的头盔
import React from 'react';
import { Helmet } from 'react-helmet';
const MyComponent => () => (
<Helmet>
<title>My Title</title>
</Helmet>
)
react-use
import React from 'react';
import { useTitle } from 'react-use';
const MyComponent = () => {
useTitle('My Title');
return null;
}
如果你是一个初学者，你可以去你的react项目文件夹的公共文件夹，在“index.html”中编辑标题，然后把你的标题放进去。别忘了保存，这样照片才会反射。
正如其他人提到的，你可以使用文档。title = 'My new title'和React Helmet来更新页面标题。这两个解决方案仍然会在脚本加载之前呈现初始的“React App”标题。
如果你使用的是create-react-app，初始文档标题设置在<title>标签/public/index.html文件中。
你可以直接编辑它，或者使用一个占位符来填充环境变量:
/.环境：
REACT_APP_SITE_TITLE='My Title!'
SOME_OTHER_VARS=...
如果出于某种原因，我想在我的开发环境中使用不同的标题—
/ .env.development:
REACT_APP_SITE_TITLE='**DEVELOPMENT** My TITLE! **DEVELOPMENT**'
SOME_OTHER_VARS=...
/公共/ index . html:
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>%REACT_APP_SITE_TITLE%</title>
...
</head>
<body>
...
</body>
</html>
这种方法还意味着我可以使用全局流程从应用程序读取站点标题环境变量。Env对象，这很好
console.log(process.env.REACT_APP_SITE_TITLE_URL);
// My Title!
参见:添加自定义环境变量
React门户可以让你渲染根React节点之外的元素(比如<title>)，就像它们是实际的React节点一样。所以现在你可以干净地设置标题，没有任何额外的依赖:
这里有一个例子:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Title extends Component {
constructor(props) {
super(props);
this.titleEl = document.getElementsByTagName("title")[0];
}
render() {
let fullTitle;
if(this.props.pageTitle) {
fullTitle = this.props.pageTitle + " - " + this.props.siteTitle;
} else {
fullTitle = this.props.siteTitle;
}
return ReactDOM.createPortal(
fullTitle || "",
this.titleEl
);
}
}
Title.defaultProps = {
pageTitle: null,
siteTitle: "Your Site Name Here",
};
export default Title;
只需将组件放在页面中并设置pageTitle:
<Title pageTitle="Dashboard" />
<Title pageTitle={item.name} />
