<meta>

内置浏览器 <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" />

请参阅下面的更多示例。

¥See more examples below.

属性

¥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 the name or itemProp props or the behavior of the directive when used with the httpEquiv prop.

特殊渲染行为

¥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>

上一章<link>

下一章<script>