<title>

Элемент встроенного браузера <title> позволяет указать заголовок документа.

<title>My Blog</title>

Ссылка
- <title>
Использование
- Установить заголовок документа
- Использование переменных в заголовке

Ссылка

`<title>`

Чтобы указать заголовок документа, используйте встроенный браузерный компонент <title>. Вы можете использовать <title> из любого компонента, и React всегда поместит соответствующий элемент DOM в заголовок документа.

<title>My Blog</title>

См. дополнительные примеры ниже.

Свойства

<title> поддерживает все общие свойства элементов.

children: <title> принимает только текст в качестве дочернего элемента. Этот текст станет заголовком документа. Вы также можете передавать свои собственные компоненты, если они выводят только текст.

Особое поведение при отрисовке

React всегда поместит элемент DOM, соответствующий компоненту <title>, в <head> документа, независимо от того, где он отображается в дереве React. <head> — единственное допустимое место для существования <title> в DOM, но это удобно и сохраняет возможность композиции, если компонент, представляющий конкретную страницу, может отобразить свой <title> самостоятельно.

Есть два исключения:

Если <title> находится внутри компонента <svg>, то никакого особого поведения нет, поскольку в этом контексте он не представляет заголовок документа, а является аннотацией доступности для этого SVG-графика.
Если у <title> есть свойство itemProp, то никакого особого поведения нет, так как в этом случае он не представляет собой заголовок документа, а метаданные о конкретной части страницы.

Опасность

Отображайте только один <title> за раз. Если более одного компонента одновременно отображают тег <title>, React поместит все эти заголовки в заголовок документа. В этом случае поведение браузеров и поисковых систем не определено.

Использование

Установить заголовок документа

Отобразите компонент <title> из любого компонента с текстом в качестве дочернего элемента. React поместит узел DOM <title> в <head> документа.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>My Site: Contact Us</title>
      <h1>Contact Us</h1>
      <p>Email us at support@example.com</p>
    </ShowRenderedHTML>
  );
}

Использование переменных в заголовке

Дочерними элементами компонента <title> должен быть один строковый текст. (Или одно число или один объект с методом toString) Может показаться не очевидным, но использование фигурных скобок JSX следующим образом:

<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string

… фактически приводит к тому, что компонент <title> получает массив из двух элементов (строку "Results page" и значение pageNumber). Это вызовет ошибку. Вместо этого используйте интерполяцию строк для передачи <title> единственной строки:

<title>{`Results page ${pageNumber}`}</title>

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-dom/components/title