Руководитель документа для React

React Helmet - это простой компонент, который упрощает управление и динамическую настройку того, что находится в разделе заголовка документа. Это делает рендеринг на стороне сервера и React Helmet динамичным дуэтом для создания приложений, оптимизированных для SEO и социальных сетей.

Этот многоразовый компонент React будет управлять всеми вашими изменениями в заголовке документа.

Helmet принимает простые теги HTML и выводит простые теги HTML. Это очень просто, и React удобен для новичков.

Установка

Пряжа:

yarn add react-helmet

npm:

npm install --save react-helmet

Функции

  • Поддерживает все допустимые теги заголовков: title, base, meta, link, script, noscript и style.
  • Поддерживает атрибуты для тегов body, html и title.
  • Поддерживает рендеринг на стороне сервера.
  • Вложенные компоненты отменяют повторяющиеся изменения головы.
  • Повторяющиеся изменения заголовка сохраняются, если они указаны в одном и том же компоненте (поддержка таких тегов, как «apple-touch-icon»).
  • Обратный вызов для отслеживания изменений DOM.

Пример

import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Вложенные или более поздние компоненты переопределят повторяющиеся изменения:

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>
    <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>

GitHub:



nfl / react-hels
Этот многоразовый компонент React будет управлять всеми вашими изменениями в заголовке документа. Helmet принимает простые HTML-теги и… github.com



Автор: Национальная футбольная лига



Национальная футбольная лига
Вместе мы делаем футбол. И программное обеспечение. Национальная футбольная лига имеет 67 доступных репозиториев. Следите за их кодом на… github.com





NFL Engineering - открытый исходный код
NFL Engineering - открытый исходный код: вместе мы делаем футбол. И программное обеспечение. nfl.github.io



Удачного кодирования :)