React 头盔不会覆盖标题和元标签

Abh*_*mar 14 html javascript reactjs

我正在开发一个反应项目。我在index.html中给出了默认的标题标签和元标签。我正在尝试使用React-helmet通过 props 更新每个页面的标题和元标记。标题标签会更新,但只更新几秒钟。每当我在 5-10 秒后更改浏览器选项卡时,标题就会恢复为默认值。至于其他元标记,这些标记根本不会覆盖。

索引.html

<head>
  <title>Content...</title>
  <meta name="description" content="description/>
</head>
Run Code Online (Sandbox Code Playgroud)

我的组件

<Helmet>
  <title>{this.state.meta_title}</title>
  <meta name="description" content={this.state.meta_description}/>
</Helmet>
Run Code Online (Sandbox Code Playgroud)

我尝试使用data-react-helmet="true"

<meta name="description" content={this.state.meta_description} data-react-helmet="true"/>
Run Code Online (Sandbox Code Playgroud)

但这没有帮助。我过去两天试图解决这个问题,但没有成功。如果有人可以帮助我,请帮助。

更新

我得到了解决方案。我在页面内调用头盔。当我在App.js文件中调用Helmet组件时,它开始工作。标题问题已修复,但元标记未更新。新的元标签可以添加到头部的底部。

Lar*_*ger 8

data-react-helmet="true" 现在替换为 data-rh="true"

就像@TomFinney 说的:只需添加 data-react-helmet="true"index.html. 由于react-helmet 在更新它们时通过属性来识别这些元素

index.html

<title>From Index</title> <!-- title is an exception and does not require it -->
<meta name="description" content="From Index" data-react-helmet="true" />
Run Code Online (Sandbox Code Playgroud)

App.jsx

<Helmet>
  <title>From Helmet</title>
  <meta name="description" content="From Helmet" />
</Helmet>
Run Code Online (Sandbox Code Playgroud)

作品: https: //e8bnj8.csb.app/ | https://codesandbox.io/s/tender-gould-e8bnj8?file=/src/App.js

您可以通过在浏览器中禁用 javascript 来测试它。