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

Canary

React 对 <title> 的扩展当前仅在 React Canary 与 experimental 渠道中可用。在 React 的稳定版本中,<title> 仅作为 浏览器内置 HTML 组件 使用。请在 此处了解更多关于 React 发布渠道的信息

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

<title>我的博客</title>

参考

<title>

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

<title>我的博客</title>

参见下方更多示例

属性

<title> 支持所有 常见元素属性

  • children<title> 只接受文本作为子元素。该文本将成为文档的标题,也可以传递只渲染文本的自定义组件。

特殊的渲染行为

无论在 React 树中的哪个位置被渲染,React 将始终将与 <title> 组件对应的 DOM 元素放置在文档的 <head> 中。<head><title> 在 DOM 中唯一有效的位置,但如果表示特定页面的组件可以自行渲染其 <title>,这样做既方便又保持了可组合性。

有两个例外情况:

  • 如果 <title><svg> 组件内部,则没有特殊行为,因为在这种情况下它不代表文档的标题,而是 SVG 图形的可访问性注释
  • 如果 <title> 具有 itemProp 属性,也没有特殊行为,因为在这种情况下它不代表文档的标题,而是页面特定部分的元数据。

陷阱

一次只渲染呈现一个 <title>。如果多个组件同时渲染那 <title> 标签,React 将把所有这些标题放在文档头部。发生这种情况时,浏览器和搜索引擎的行为是不确定的。


用法

设置文档标题

从任何组件中使用文本作为其子元素渲染 <title> 组件。React 将在文档的 <head> 中放置一个 <title> DOM 节点。

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>我的网站:联系我们</title>
      <h1>联系我们</h1>
      <p>通过电子邮件 support@example.com 联系我们</p>
    </ShowRenderedHTML>
  );
}

在标题中使用变量

<title> 组件的子元素必须是单个文本字符串(或者是单个数字或带有 toString 方法的单个对象)。可能并不明显,但这样使用 JSX 大括号是存在问题的:

<title>Results page {pageNumber}</title> // 🔴 问题:这不是单个字符串

……实际上会导致 <title> 组件的子元素是一个包含两个元素的数组(字符串 "Results page"pageNumber 的值)。这将导致错误,应该使用字符串插值传递给 <title> 一个单个字符串:

<title>{`Results page ${pageNumber}`}</title>