內建瀏覽器元件 <title> 可讓您指定文件的標題。內建瀏覽器 <title> 元件

<title>My Blog</title>

參考

<title>

要指定文件的標題，請渲染內建瀏覽器 <title> 元件。您可以在任何元件中渲染 <title>，React 總是會將對應的 DOM 元素放置在文件標頭中。

<title>My Blog</title>

請參閱下面的更多範例。

屬性

<title> 支援所有常用元素屬性。

  • children：<title> 只接受文字作為子項。此文字將成為文件的標題。您也可以傳遞您自己的元件，只要它們只渲染文字即可。

特殊渲染行為

無論 <title> 元件在 React 樹中的哪個位置渲染，React 總是會將對應的 DOM 元素放置在文件的 <head> 中。<head> 是 DOM 中 <title> 唯一有效的存在位置，但如果代表特定頁面的元件可以渲染自己的 <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 support@example.com</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>
下一頁API