Question

我创建了一个服务器端react应用，它将返回html，如下所示：

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>A Cool Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="${ROOT}/client-bundle.js"></script>
  </body>
</html>

我读到很多人一直在使用反应头盔来管理头部中的内容。我想知道使用它的好处是什么，当我可以直接包含上述内容时。

Answer 1

一个主要的好处或反作用力是当您在树中具有带有<head>标签的多个组件，并且具有<meta>标签具有相同的属性/值时。

例如，如果您在索引页面组件上具有

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="This is the index page description"> 
    <title>A Cool Index Page</title>
  </head>
</html>

但是在叶子页面组件上，您还具有包含元标记的<head>标记：

<html>
  <head>
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

请注意，在我们的两个页面组件之间，树中有两个具有相同属性值name="description"的meta标签。您可能会认为这可能导致重复，但是react-helmet可以解决此问题。

如果某人最终停留在叶子页面上，则react-helmet会覆盖索引/站点级别的描述元标记，并呈现较低级别的一个（专门用于叶子页面的标记）。

它也将包含视口元标记，因为它不必被覆盖。

由于react-helmet在叶子页上，<head>如下所示：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

Answer 2

反应头盔还允许您在渲染功能的范围内外部修改类。

例如，如果要动态修改<body>标签，可以执行以下操作：

<Helmet>
    <body className="dynamic-class-for-body-on-this-view" />
</Helmet>

Answer 3

反应头盔是可重复使用的React组件，它将管理您对文档头的所有更改。例如，如果要根据SEO更改每个页面的标题和描述，则可以执行以下操作：

<Helmet>
            <title>Your Tiltle</title>
            <meta name="description" content="Description of your page" />
</Helmet>

Answer 4

这两种方法都应该起作用。但是使用反应头盔时，头部也被视为组件，并且更像反应。同样，尽管这很罕见，但是您可以将一些道具或状态与元数据绑定以实现动态头。一种情况是在不同语言之间切换。

Answer 5

反应头盔允许设置将由搜索引擎和社交媒体抓取工具读取的元标记。这使得服务器端渲染和React Helmet成为创建SEO和社交媒体友好应用的动态组合。

例如：

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Turbo Todo</title>
    <meta name="description" content="test on react-helmet" />
    <meta name="theme-color" content="#ccc" />
</Helmet>

反应头盔的目的是什么？

5 个答案: