API 参考
组件

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

Canary 版本

React 对 <title> 的扩展目前仅在 React 的 Canary 和实验性版本中可用。在 React 的稳定版本中，<title> 仅作为 内置浏览器 HTML 组件 使用。在此处详细了解 React 的版本发布渠道。

内置浏览器 <title> 组件 允许您指定文档的标题。

<title>My Blog</title>

参考

<title>

要指定文档的标题，请渲染 内置浏览器 <title> 组件。您可以从任何组件渲染 <title>，React 始终会将相应的 DOM 元素放置在文档头部。

<title>My Blog</title>

请参阅下面的更多示例。

属性

<title> 支持所有 通用元素属性。

  • children: <title> 仅接受文本作为子元素。此文本将成为文档的标题。您也可以传递您自己的组件，只要它们只渲染文本即可。

特殊渲染行为

无论 <title> 组件在 React 树中的哪个位置渲染，React 始终会将与其对应的 DOM 元素放置在文档的 <head> 中。<head> 是 <title> 在 DOM 中存在的唯一有效位置，但如果表示特定页面的组件可以渲染其自身的 <title>，则这将非常方便并保持事物的可组合性。

对此有两个例外

  • 如果 <title> 位于 <svg> 组件内，则不会有特殊行为，因为在此上下文中，它不表示文档的标题，而是表示 该 SVG 图形的辅助功能注释。
  • 如果 <title> 具有 itemProp 属性，则不会有特殊行为，因为在这种情况下，它不表示文档的标题，而是表示关于页面特定部分的元数据。

陷阱

一次只渲染一个 <title>。如果多个组件同时渲染 <title> 标签，React 会将所有这些标题都放在文档头部。发生这种情况时，浏览器和搜索引擎的行为未定义。

用法

设置文档标题

使用任何包含文本作为子元素的组件渲染 <title> 组件。React 会将一个 <title> DOM 节点放入文档的 <head> 中。

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 [email protected]</p>
    </ShowRenderedHTML>
  );
}

在标题中使用变量

<title> 组件的子元素必须是单个文本字符串。（或者单个数字或具有 toString 方法的单个对象。）可能并不明显，但是像这样使用 JSX 花括号

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

… 实际上会导致 <title> 组件将其子元素作为包含两个元素的数组获取（字符串 "结果页" 和 pageNumber 的值）。这将导致错误。请使用字符串插值将单个字符串传递给 <title>

<title>{`Results page ${pageNumber}`}</title>
上一页<style>
下一页API