API 参考
组件

<meta> - This feature is available in the latest Canary

Canary 版本

React 对 <meta> 的扩展目前仅在 React 的 Canary 和实验通道中可用。在 React 的稳定版本中，<meta> 仅作为 内置浏览器 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 树中的哪个位置渲染，React 始终会将与 <meta> 组件对应的 DOM 元素放置在文档的 <head> 中。<head> 是 DOM 中 <meta> 存在的唯一有效位置，但是如果表示特定页面的组件可以自己渲染 <meta> 组件，则这样做很方便并且可以保持组件的可组合性。

对此有一个例外：如果 <meta> 具有 itemProp 属性，则没有特殊行为，因为在这种情况下，它不代表有关文档的元数据，而是代表有关页面特定部分的元数据。

用法

使用元数据注释文档

您可以使用元数据注释文档，例如关键字，摘要或作者姓名。无论在 React 树中的哪个位置渲染，React 都会将此元数据放置在文档 <head> 中。

<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 将在文档 <head> 中放置一个 <meta> DOM 节点。

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>
上一页<link>
下一页<script>