<meta>
Canary
Расширения React для <meta> в настоящее время доступны только в каналах Canary и экспериментальных каналах React. В стабильных выпусках React <meta> работает только как встроенный браузерный HTML-компонент встроенный браузерный HTML-компонент. Дополнительную информацию о каналах выпуска React можно найти здесь.
Встроенный браузерный <meta> компонент позволяет добавлять метаданные в документ.
<meta name="keywords" content="React, JavaScript, semantic markup, html" />Справочник
<meta>
Для добавления метаданных документа, используйте встроенный браузерный <meta> компонент. Вы можете отобразить <meta> из любого компонента, и React всегда разместит соответствующий элемент DOM в заголовке документа.
<meta name="keywords" content="React, JavaScript, semantic markup, html" />Дополнительные примеры см. ниже.
Свойства
<meta> поддерживает все общие свойства элементов.
Он должен иметь ровно одно из следующих свойств: name, httpEquiv, charset, itemProp. Компонент <meta> ведет себя по-разному в зависимости от того, какое из этих свойств указано.
-
name: строка. Указывает тип метаданных, которые необходимо добавить в документ. -
charset: строка. Указывает кодировку символов, используемую документом. Единственное допустимое значение —"utf-8". -
httpEquiv: строка. Указывает директиву для обработки документа. -
itemProp: строка. Указывает метаданные об определенном элементе в документе, а не о документе в целом. -
content: строка. Указывает метаданные, которые необходимо добавить при использовании свойствnameилиitemProp, или поведение директивы при использовании свойстваhttpEquiv.
Особое поведение при отрисовке
React всегда разместит элемент DOM, соответствующий компоненту <meta>, в <head> документа, независимо от того, где он отображается в дереве React. <head> — единственное допустимое место для существования <meta> в DOM, но удобно и сохраняет композицию, если компонент, представляющий конкретную страницу, может отображать <meta> компоненты сам.
Есть одно исключение: если у <meta> есть свойство itemProp, особого поведения нет, поскольку в этом случае он представляет метаданные не о документе, а о конкретной части страницы.
Использование
Аннотирование документа метаданными
Вы можете аннотировать документ такими метаданными, как ключевые слова, сводка или имя автора. React поместит эти метаданные в <head> документа, независимо от того, где в дереве React он отображается.
<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />Вы можете отобразить <meta> компонент из любого компонента. React поместит узел DOM <meta> в <head> документа.
import ShowRenderedHTML from './ShowRenderedHTML.js'; export default function SiteMapPage() { return ( <ShowRenderedHTML> <meta name="keywords" content="React" /> <meta name="description" content="A site map for the React website" /> <h1>Site Map</h1> <p>...</p> </ShowRenderedHTML> ); }
Аннотирование конкретных элементов документа метаданными
Вы можете использовать компонент <meta> со свойством itemProp для аннотирования конкретных элементов документа метаданными. В этом случае React не поместит эти аннотации в <head> документа, а разместит их как любой другой компонент React.
<section itemScope>
<h3>Annotating specific items</h3>
<meta itemProp="description" content="API reference for using <meta> with itemProp" />
<p>...</p>
</section>
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://18.react.dev/reference/react-dom/components/meta
