如何在html中将<Head>从next/head从body移动到head
如何在html中将<Head>从next/head从body移动到head
提问于 2019-05-16 05:53:25
我需要向页面的<title></title>添加动态值。为此，我使用了next/head提供的Head组件。
标题需要在某些用户操作时更改(因此不能放在_app.js或_document.js中)。
但是，如果我将这段代码：<Head><title>Page title</title></Head>放在_app.js或_document.js之外的任何地方，页面的<body>标记中就会出现，这并不是我们想要的。
// modules/about_us/index.js
import Head from 'next/head'
export default class AboutUs extends Component {
state = {
title: 'About you'
}
someEvent1(){
this.setState({title : 'About team'})
}
someEvent2(){
this.setState({title : 'About company'})
}
render(){
return (
<div>
<Head>
<title>{this.state.title}</title>
</Head>
<div>This is one of the module used to display the page.</div>
<button onClick={this.someEvent1}>About team</button>
<button onClick={this.someEvent2}>About company</button>
</div>
)
}
}回答 2
Stack Overflow用户
发布于 2019-05-16 06:01:49
我推荐使用纯javascript，而不是试图通过jsx / markup来调整它。
document.title = 'My New Title';https://developer.mozilla.org/en-US/docs/Web/API/Document/title
Stack Overflow用户
发布于 2019-05-17 23:41:43
为此，您可以使用react-helmet库
从自述文件中：
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com" />
</Helmet>
...
</div>
);
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56158138
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号