web-dev-qa-db-fra.com

À quoi sert React-Casque?

J'ai créé une application de réaction côté serveur, où elle retournerait du HTML comme indiqué ci-dessous:

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>

J'ai lu que beaucoup de gens utilisaient react-casque pour gérer le contenu dans la tête. Je me demande quel est l'avantage de l'utiliser, quand je peux simplement l'inclure comme indiqué ci-dessus.

reactjsreact-helmet
22
PBandJen

Un avantage majeur ou casque réactif est lorsque vous avez plusieurs composants dans une arborescence avec <head> tags, et vous avez <meta> balises avec les mêmes attributs/valeurs.

Par exemple, si sur votre composant de page index vous avez:

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>

Mais alors, sur un composant de page leaf, vous avez également un <head> balise contenant des méta balises:

<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>

Notez entre nos deux composants de page, il y a deux balises META avec la même valeur d'attribut name="description" dans notre arbre. Vous pourriez penser que cela pourrait entraîner des doublons, mais react-helmet s'occupe de ce problème.

Si quelqu'un se retrouve sur la page feuille, react-casque remplace la balise meta description d'index/niveau site et rend celle de niveau inférieur, celle spécifiquement pour la page feuille.

Il contiendra également la balise META de la fenêtre d'affichage, car elle n'a pas dû être remplacée.

En raison de react-helmet, sur la page feuille, le <head> apparaîtrait comme suit:

<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

Les deux méthodes devraient fonctionner. Mais avec react-casque, la tête est également traitée comme un composant et ressemble plus à une réaction. De plus, bien que ce soit inhabituel, vous pouvez lier certains accessoires ou états aux métadonnées pour implémenter une tête dynamique. Un scénario consiste à basculer entre différentes langues.

0
Van