内置浏览器 <meta> 组件 允许你将元数据添加到文档中。
¥The built-in browser <meta> component lets you add metadata to the document.
<meta name="keywords" content="React, JavaScript, semantic markup, html" />参考
¥Reference
<meta>
要添加文档元数据，请渲染 内置浏览器 <meta> 组件。你可以从任何组件渲染 <meta>，React 总是将相应的 DOM 元素放置在文档头中。
¥To add document metadata, render the built-in browser <meta> component. You can render <meta> from any component and React will always place the corresponding DOM element in the document head.
<meta name="keywords" content="React, JavaScript, semantic markup, html" />属性
¥Props
<meta> 支持所有 普通元素属性。
¥<meta> supports all common element props.
它应该恰好具有以下属性之一：name, httpEquiv, charset, itemProp.<meta> 组件根据指定的这些属性执行不同的操作。
¥It should have exactly one of the following props: name, httpEquiv, charset, itemProp. The <meta> component does something different depending on which of these props is specified.
-
name：一个字符串。指定要附加到文档的 元数据类型。¥
name: a string. Specifies the kind of metadata to be attached to the document. -
charset：一个字符串。指定文档使用的字符集。唯一有效的值为"utf-8"。¥
charset: a string. Specifies the character set used by the document. The only valid value is"utf-8". -
httpEquiv：一个字符串。指定处理文档的指令。¥
httpEquiv: a string. Specifies a directive for processing the document. -
itemProp：一个字符串。指定有关文档中特定项目而不是整个文档的元数据。¥
itemProp: a string. Specifies metadata about a particular item within the document rather than the document as a whole. -
content：一个字符串。指定与name或itemProp属性一起使用时要附加的元数据，或与httpEquiv属性一起使用时指令的行为。¥
content: a string. Specifies the metadata to be attached when used with thenameoritemPropprops or the behavior of the directive when used with thehttpEquivprop.
特殊渲染行为
¥Special rendering behavior
React 总是将与 <meta> 组件对应的 DOM 元素放置在文档的 <head> 中，无论它在 React 树中的哪个位置渲染。<head> 是 <meta> 在 DOM 中存在的唯一有效位置，但如果表示特定页面的组件可以自行渲染 <meta> 组件，那么它会很方便并且保持可组合性。
¥React will always place the DOM element corresponding to the <meta> component within the document’s <head>, regardless of where in the React tree it is rendered. The <head> is the only valid place for <meta> to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render <meta> components itself.
但有一个例外：如果 <meta> 有 itemProp 属性，则没有特殊行为，因为在这种情况下，它并不表示有关文档的元数据，而是表示有关页面特定部分的元数据。
¥There is one exception to this: if <meta> has an itemProp prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page.
用法
¥Usage
使用元数据注释文档
¥Annotating the document with metadata
你可以使用关键字、摘要或作者名称等元数据来注释文档。React 会将此元数据放置在文档 <head> 中，无论它在 React 树中的哪个位置渲染。
¥You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document <head> regardless of where in the React tree it is rendered.
<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 会将 <meta> DOM 节点放入文档 <head> 中。
¥You can render the <meta> component from any component. React will put a <meta> DOM node in the document <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> ); }
使用元数据注释文档中的特定条目
¥Annotating specific items within the document with metadata
你可以使用 <meta> 组件和 itemProp 属性来使用元数据注释文档中的特定项目。在这种情况下，React 不会将这些注释放置在文档 <head> 中，而是像任何其他 React 组件一样放置它们。
¥You can use the <meta> component with the itemProp prop to annotate specific items within the document with metadata. In this case, React will not place these annotations within the document <head> but will place them like any other React component.
<section itemScope>
<h3>Annotating specific items</h3>
<meta itemProp="description" content="API reference for using <meta> with itemProp" />
<p>...</p>
</section>