Перейти к содержанию

<title>

Canary

Расширения React для <title> в настоящее время доступны только в канале React canary и экспериментальном канале. В стабильных релизах React <title> работает только как встроенный в браузер HTML-компонент. Подробнее о каналах выпуска React здесь.

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

1
<title>My Blog</title>

Описание

<title>

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

1
<title>My Blog</title>

Параметры

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

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

Особое поведение при рендеринге

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

Есть два исключения из этого правила:

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

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

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

Set the document title

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { renderToStaticMarkup } from 'react-dom/server';
import formatHTML from './formatHTML.js';

export default function ShowRenderedHTML({ children }) {
    const markup = renderToStaticMarkup(
        <html>
            <head />
            <body>{children}</body>
        </html>
    );
    return (
        <>
            <h1>Rendered HTML:</h1>
            <pre>{formatHTML(markup)}</pre>
        </>
    );
}

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

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

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

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

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

Источник — https://react.dev/reference/react-dom/components/title

Комментарии