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

<title>My Blog</title>

参考

<title>

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

<title>My Blog</title>

请参见下面的更多示例。

属性

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

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

特殊的渲染行为

React 将始终将与 <title> 组件对应的 DOM 元素放置在文档的 <head> 中，无论它在 React 树中的哪个位置渲染。<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>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>`组件获取一个包含两个元素的数组作为其子元素（字符串`"Results page"`和`pageNumber`的值）。这将导致错误。相反，使用字符串插值向`<title>`传递单个字符串

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