<title>

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

¥The built-in browser <title> component lets you specify the title of the document.

<title>My Blog</title>

参考

¥Reference

`<title>`

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

¥To specify the title of the document, render the built-in browser <title> component. You can render <title> from any component and React will always place the corresponding DOM element in the document head.

<title>My Blog</title>

请参阅下面的更多示例。

¥See more examples below.

属性

¥Props

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

¥<title> supports all common element props.

children：<title> 作为子项仅接受文本。该文本将成为文档的标题。你还可以传递自己的组件，只要它们仅渲染文本即可。

¥children: <title> accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.

特殊渲染行为

¥Special rendering behavior

React 总是将与 <title> 组件对应的 DOM 元素放置在文档的 <head> 中，无论它在 React 树中的哪个位置渲染。<head> 是 <title> 在 DOM 中存在的唯一有效位置，但如果表示特定页面的组件可以自行渲染其 <title>，那么它会很方便并且保持可组合性。

¥React will always place the DOM element corresponding to the <title> component within the document’s <head>, regardless of where in the React tree it is rendered. The <head> is the only valid place for <title> to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its <title> itself.

有两个例外：

¥There are two exception to this:

如果 <title> 在 <svg> 组件内，则没有特殊行为，因为在这种情况下，它并不代表文档的标题，而是代表该 SVG 图形的辅助功能注释。

¥If <title> is within an <svg> component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an accessibility annotation for that SVG graphic.
如果 <title> 有 itemProp 属性，则没有特殊行为，因为在这种情况下，它并不代表文档的标题，而是代表页面特定部分的元数据。

¥If the <title> has an itemProp prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.

易犯错误

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

¥Only render a single <title> at a time. If more than one component renders a <title> tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.

用法

¥Usage

设置文档标题

¥Set the document title

从任何以文本作为子组件的组件中渲染 <title> 组件。React 会将 <title> DOM 节点放入文档 <head> 中。

¥Render the <title> component from any component with text as its children. React will put a <title> DOM node in the document <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 support@example.com</p>
    </ShowRenderedHTML>
  );
}

在标题中使用变量

¥Use variables in the title

<title> 组件的子组件必须是单个文本字符串。（或者使用 toString 方法的单个数字或单个对象。）这可能并不明显，但使用 JSX 大括号如下所示：

¥The children of the <title> component must be a single string of text. (Or a single number or a single object with a toString method.) It might not be obvious, but using JSX curly braces like this:

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

…实际上导致 <title> 组件获取一个二元素数组作为其子元素（字符串 "Results page" 和 pageNumber 的值）。这会导致错误。相反，使用字符串插值向 <title> 传递单个字符串：

¥… actually causes the <title> component to get a two-element array as its children (the string "Results page" and the value of pageNumber). This will cause an error. Instead, use string interpolation to pass <title> a single string:

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

上一章<style>

下一章API