web-dev-qa-db-ja.com

反応ヘルメットの目的は何ですか？

以下に示すように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>

頭の中のコンテンツを管理するために反応ヘルメットを使用している多くの人々を読みました。上記のように直接インクルードできるのに、それを使用するメリットは何ですか。

reactjsreact-helmet
22
PBandJen

主な利点または反応ヘルメットは、<head>タグを持つツリー内に複数のコンポーネントがあり、同じ属性/値を持つ<meta>タグがある場合です。

たとえば、indexページコンポーネントの場合：

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>

しかしleafページコンポーネントには、メタタグを含む<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>

2つのページコンポーネントの間に、ツリー内に同じ属性値name="description"を持つ2つのメタタグがあることに注意してください。これは重複につながると思われるかもしれませんが、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>
3
Lexis Hanson

どちらの方法でも機能するはずです。しかし、リアクションヘルメットを使用すると、ヘッドもコンポーネントとして扱われ、よりリアクションのようになります。また、珍しいことですが、動的ヘッドを実装するために、いくつかの小道具または状態をメタデータにバインドできます。 1つのシナリオは、異なる言語間の切り替えです。

0
Van