内置浏览器 <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>属性
¥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 anitemPropprop, 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.
用法
¥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>