Reactjs 如何在React.js中更新元标记？_Reactjs

Reactjs 如何在React.js中更新元标记？

reactjs

Reactjs 如何在React.js中更新元标记？,reactjs,Reactjs,我在react.js中处理一个单页应用程序，那么在页面转换或浏览器后退/前进时更新元标记的最佳方式是什么呢？我在一个旧项目中使用过只要定义你的元价值 const meta = { title: 'Some Meta Title', description: 'I am a description, and I can create multiple tags', canonical: 'http://example.com/path/to/page', meta

我在react.js中处理一个单页应用程序，那么在页面转换或浏览器后退/前进时更新元标记的最佳方式是什么呢？

我在一个旧项目中使用过

只要定义你的元价值

const meta = {
    title: 'Some Meta Title',
    description: 'I am a description, and I can create multiple tags',
    canonical: 'http://example.com/path/to/page',
    meta: {
        charset: 'utf-8',
        name: {
            keywords: 'react,meta,document,html,tags'
        }
    }

并放置一个

<DocumentMeta {...meta} />

在返回中，您可以使用。它允许您以声明方式和正常jsx格式编写title和其他元标记，这些标记将被移动到head（检查文档上的服务器使用情况）

从“React”导入React；
从“反应元标记”导入元标记；
类Component1扩展了React.Component{
render（）{
返回(
第1页
一些内容
)
}
}

您还可以检查是否有高级用例。

您还可以用以下方式给出页面标题和元标记说明

在index.html文件中放置一个描述元标记，如下所示

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Dynamic Page title here</title>


动态页面标题在这里

在render（）方法下面的.js文件或.jsx文件中，像这样为页面编写页面标题和元描述

render()
{
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";

return(
    <div>Page content</div>
);
}

render（）
{
document.title=“欢迎|这是要显示的页面标题”；
document.getElementsByTagName（“META”）[2].content=“您对此处要动态设置的页面或站点的描述”；
返回(
页面内容
);
}

根据官方文档，您也可以使用几乎肯定要使用的

：

与

react meta-tags

不同，它可以嵌套

s，这样你就可以在你的应用程序中定义你的meta-tags，就像

s一样，它们应该相互覆盖。与

react document meta

不同，您可以使用jsx（和嵌套对象）定义对象

这似乎是社区几乎独家使用的解决方案-每周下载60万次，而其他解决方案中的下载量为6000次。“头盔接受普通HTML标记并输出普通HTML标记。它非常简单，并且对初学者友好。”-并且支持服务器端渲染

以下是一个改编自头版的示例：

<Parent>
    I'm a parent
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>
 
    <Child>
        I'm a child
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>


我是父母
我的头衔
我是个孩子
嵌套标题

产出：

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>
<Parent>
    I'm a parent
    <Child>
        I'm a child
    </Child>
</Parent>


嵌套标题
我是父母
我是个孩子

不确定这是否是您要寻找的答案，但我正在搜索如何更新您的react应用程序在其他应用程序中预览链接时显示的信息。我尝试的每个解决方案都不能使用github页面和react（react头盔、react元标记、react文档元）。最终起作用的是，您可以编辑

public

文件夹中的

index.html

来更改此信息。在头脑中的某个地方包括：


IMDB

来自

的示例首先，如果您不需要动态数据，您可以编辑

public/index.html

对于动态数据，React团队可以使用

从“React”导入React；
从“react Helmet”导入{Helmet}；
类应用程序扩展了React.Component{
渲染（）{
返回(
反应应用程序
...
);
}
};

或者使用占位符并在服务器端替换它们：

您可以使用文档查询并更新其值

const setTitle = title => {
    const el = document.querySelector('title');
    el.innerText = `${el.text} | ${title}`;
  };

const setDescription = desc => {
    const el = document.querySelector("meta[name='description']");
    el.setAttribute('content',desc)
  }

正如
create react app
所述：

如果需要根据内容动态更新页面标题，可以使用浏览器API。对于更复杂的场景，当您希望更改React components的标题时，可以使用第三方库

一个简单的例子：

函数应用程序（）{
document.title=“主页”；
返回(
...
)
}

标签会随着页面转换而改变还是只针对登录页面？应用程序的结构如何？您是否有多个组件，或者只有一个组件在转换时发生了更改？两个组件将发生更改，其余部分保持不变。此外，我发现此模块不再处于活动状态。链接中提到的和你提到的一样吗？是的，你是对的。我没看到，但反应头盔应该可以正常工作。您必须为所有转换定义一个集合，并在渲染之前相应地设置属性。在尝试使用react元标记时，我遇到了重复元标记的问题。未在路线或状态更改时复制标记。此问题现已修复。@SudhanshuYadav仍然未修复。刚刚尝试了

og:title

和

og:image

@SudhanshuYadav，我知道这篇文章已经发布很久了，但我面临这个问题，我在检查元素时看到了元标记，但它没有显示在源代码页面上。我们是否可以生成动态标记并在页面源代码中显示它们。不清楚它是否支持对SEO很重要的标题标记。我可以看到我的元标记正在使用这种方法更新，但当我使用twitter卡验证程序或facebook共享调试器时，它找不到我的元/opengraph标记：（注意：我是静态宿主，或者你可以使用

getElementsByName

通过元素名称来更具体地定位，这是行不通的。因为文档是javascript代码，搜索爬虫无法读取javascript，这只是一个对我有用的小提示（在SSR体系结构中工作。我把它放在componentDidMount（）上）方法。这个库已经落后了。他们使用了不推荐使用的生命周期挂钩…@mmla在发表评论时，挂钩只引入了两个（！）几个月前…老兄，这就像在reactjs上拉屎一样，因为毕竟这并不是那么糟糕。你的论点是大众化的，但是，你没有展示任何代码。这对我不起作用，但@Fahd Allebdi的解决方案起了作用。你能分享一下如何重新投票的方法吗

const setTitle = title => {
    const el = document.querySelector('title');
    el.innerText = `${el.text} | ${title}`;
  };

const setDescription = desc => {
    const el = document.querySelector("meta[name='description']");
    el.setAttribute('content',desc)
  }