简介
React-Helmet-Prepend 是一个 React 应用中的 npm 包，可以用来方便地在页面的头部添加 meta 标签、link 标签等。在前端开发中，往往需要为了优化页面 SEO、保证页面资源加载效率等需要在页面头部添加这些标签。使用 React-Helmet-Prepend，可以更方便、快捷地实现这些功能。
安装
首先，需要将 React-Helmet-Prepend 安装到项目中:
npm install react-helmet-prepend --save
用法
基础用法
在文件开头处引用 react-helmet-prepend :
import {Helmet} from "react-helmet-prepend";在组件的 render 方法中，使用 Helmet 组件来添加需要的 meta 标签、link 标签等，例如：
-- -------------------- ---- -------
-------- -
------ -
-----
--------
----- --------------- --
--------- -------------
----- --------------- ----------------------------------- --
---------
------- -------------
------
--
-在本例中，使用了 Helmet 组件来添加了三个标签：
meta标签，设置字符编码为 utf-8。title标签，设置页面标题为 "My Title"。link标签，设置页面的 canonical URL 为 "http://example.com/page.html"。
在实际开发中，你可以根据需要添加更多、更具体的标签，比如用于图标、OpenGraph 等。
继承标签内容
如果有多个 Helmet 组件，后面的组件会覆盖前面的组件。为了保留前一个 Helmet 组件的信息，需要在组件中添加继承属性。
例如，下面的代码中，第一个 Helmet 组件将 <title>My Title</title> 添加到了页面中。接下来的组件只包含 <meta name="description" content="My description" />。这里使用了 defaultTitle 属性，来保留第一个 Helmet 组件的信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------
----- ---- - -- -- -
-----
--------
--------- -------------
---------
-------
---------- ----- - -- ----------
----------------- -------
------------------ - -- ----------
-
----- ------------------ ----------- ------------ --
---------
-------- ---------
------
--属性
Helmet 组件提供了多种属性，可以用来自定义标签的属性，例如 charset、name、content、href、rel 等。具体属性可以参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
结语
React-Helmet-Prepend 是一个非常有用的 npm 包，能够帮助前端开发者方便地向页面头部添加标签，提高页面的 SEO、性能等。在实际开发中，使用 react-helmet-prepend 可以更快捷、方便地完成这些功能。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------
------ ------- -------- ------ -
------ -
-----
--------
----- --------------- --
-------------------
----- ---------- ------------------- --
-----
----------------
-----------------------------------------------------------------------
--
---------
---------------
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b54