<title>
Canary
Расширения React для <title> в настоящее время доступны только в каналах React canary и experimental. В стабильных выпусках React <title> работает только как встроенный браузерный HTML-компонент встроенный браузерный HTML-компонент. Узнайте больше о каналах выпуска React здесь.
Встроенный браузерный <title> компонент позволяет задать заголовок документа.
<title>My Blog</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 поместит <title> DOM-узел в <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://18.react.dev/reference/react-dom/components/title
