我正在 react.js 中处理单页应用程序，那么在页面转换或浏览器后退/前进时更新元标记的最佳方法是什么？
如何更新 React.js 中的元标记？
IT技术
reactjs
2021-05-05 08:30:40
4个回答
我在旧项目中使用过react-document-meta。
只需定义您的元值
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} />
在回报
您可以使用react-meta-tags。它允许您以声明方式和正常的 jsx 格式编写标题和其他元标记，这些标记将被移至头部（检查文档中的服务器使用情况）。
import React from 'react';
import MetaTags from 'react-meta-tags';
class Component1 extends React.Component {
render() {
return (
<div class="wrapper">
<MetaTags>
<title>Page 1</title>
<meta id="meta-description" name="description" content="Some description." />
<meta id="og-title" property="og:title" content="MyApp" />
<meta id="og-image" property="og:image" content="path/to/image.jpg" />
</MetaTags>
<div class="content"> Some Content </div>
</div>
)
}
}
如果您有高级用例，您可能还想检查react-helmet。
您几乎肯定要使用：
react头盔
与react-meta-tags它相反，它可以嵌套<Helmet>s，因此您可以在应用程序的深处定义元标记 - 就像<title>s 应该相互覆盖。与此相反，react-document-meta您可以使用 jsx（和嵌套事物）定义事物。
这似乎是社区几乎完全使用的解决方案 - 每周下载 600,000 次，而其他解决方案中给出的则是 6,000 次。“Helmet 采用纯 HTML 标签并输出纯 HTML 标签。它非常简单，而且 React 初学者友好。” - 并支持服务器端渲染。
这是一个改编自首页的例子：
<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>
您还可以通过以下方式给出页面标题和元标记描述。
像这样在 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>
在您的 .js 文件或 .jsx 文件中的 render() 方法下方，像这样编写页面的页面标题和元描述。
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>
);
}
其它你可能感兴趣的问题