DevGang
Авторизоваться

Доступные заголовки в React 

Четкие и лаконичные заголовки страниц помогают пользователям с ограниченными возможностями понять содержание и общую цель веб-страницы. Заголовки определяют текущее местоположение, не требуя от пользователей чтения или интерпретации содержимого страницы. Без заголовков пользователи с ограниченными возможностями могут либо потерять из виду страницу, на которой они сейчас находятся, либо не понять цель страницы.

Что делает доступным заголовок

Доступный заголовок дает достаточно информации, которая четко и быстро определяет цель и содержание страницы. Добавление одного слова для описания страницы в качестве заголовка не соответствует потребностям человека с ограниченными возможностями.

Пример часто встречающегося названия - «Магазин». «Магазин» просто не дает достаточно общих сведений о цели страницы. Давайте рассмотрим несколько способов сделать заголовок более доступным:

  1. Плохо: Магазин
  2. Лучше: Магазин Марка - Магазин
  3. Лучшее / доступное: Магазин Марка - Магазин - Носки

Наиболее доступный заголовок содержит такие детали, как название сайта, цель страниц, которая заключается в совершении покупок, а затем конкретный товар, который они покупают.

Почему это проблема в React

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

Оба эти утверждения просто не соответствуют действительности. В React есть множество различных способов реализовать эффективные и доступные заголовки страниц между маршрутами в вашем приложении!

Пакет response-document-title

Пакет response-document-title позволяет вам легко добавлять заголовок страницы к вашим компонентам страницы React с помощью настраиваемого тега HTML под названием «DocumentTitle», который обертывает ваш компонент страницы. После добавления просто используйте атрибут title в теге, и вы можете установить заголовок своих страниц.

Пример использования

render() {
    return (
      <DocumentTitle title="Mark's Store - Shop - Socks" >
        <div>
          <h1> Shop Socks </h1>
        </div>
      </DocumentTitle>
    );
  }

React Helmet

Пакет react-helmet будет управлять всеми вашими изменениями в заголовке документа. Хорошая новость этого пакета в том, что он позволяет использовать базовый HTML.

Теги для установки всего содержимого. В нем вы также можете использовать это, чтобы установить заголовок вашей страницы!

Пример использования

  render () {
    return (
        <div className="main">
            <Helmet>
                <meta charSet="utf-8" />
                <title>Mark's Store - Shop - Socks</title>
            </Helmet>
            ...
        </div>
    );
  }

Жизненный цикл компонента

Используя жизненный цикл компонента Reacts, вы можете установить заголовок документа после рендеринга компонента с помощью document.title. Это отличный метод для команд, которые не хотят использовать стороннюю библиотеку для создания доступных заголовков.

Пример использования

class PageTitle extends Component {
  render() {
    return (
        <div>
           <h1> Shop Socks </h1>
        </div>
    );
  }

  componentDidMount() {
    document.title = "Mark's Store - Shop - Socks";
  }
}

В итоге

Написание доступных заголовков в React не так сложно, как предполагалось. Использование любого из вышеперечисленных методов для добавления заголовков к компонентам вашей страницы, а также обеспечение четкости, краткости и описания общих целей страниц сделает ваше приложение более доступным для всех!

#React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить