內建瀏覽器 <link> 元件

可讓您使用外部資源，例如樣式表或使用連結詮釋資料標註文件。 

<link rel="icon" href="favicon.ico" />

參考

<link>

要連結到外部資源，例如樣式表、字體和圖示，或使用連結詮釋資料標註文件，請渲染內建瀏覽器 <link> 元件。您可以從任何元件渲染 <link>，在多數情況下，React 會將對應的 DOM 元素放置在文件標題中。

<link rel="icon" href="favicon.ico" />

請參閱以下更多範例。

屬性

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

  • rel：字串，必填。指定與資源的關係。React 對待具有 rel="stylesheet" 的連結與其他連結不同。

當 rel="stylesheet" 時，適用以下屬性

  • precedence：字串。告訴 React <link> DOM 節點相對於文件 <head> 中其他節點的等級，這決定了哪個樣式表可以覆蓋另一個樣式表。React 會推斷先發現的優先順序值「較低」，後發現的優先順序值「較高」。許多樣式系統可以使用單個優先順序值正常工作，因為樣式規則是原子的。具有相同優先順序的樣式表會放在一起，無論它們是 <link> 還是內聯 <style> 標籤，或者使用 preinit 函式載入。
  • media：字串。將樣式表限制為特定媒體查詢。
  • title：一個字串。指定替代樣式表的名稱。

當 rel="stylesheet" 時，這些屬性會生效，但會停用 React 的樣式表的特殊處理

  • disabled：一個布林值。停用樣式表。
  • onError：一個函式。當樣式表載入失敗時呼叫。
  • onLoad：一個函式。當樣式表載入完成時呼叫。

當 rel="preload" 或 rel="modulepreload" 時，這些屬性會生效

  • as：一個字串。資源類型。可能的值為 audio、document、embed、fetch、font、image、object、script、style、track、video、worker。
  • imageSrcSet：一個字串。僅適用於 as="image"。指定圖片的來源集。
  • imageSizes：一個字串。僅適用於 as="image"。指定圖片的尺寸。

當 rel="icon" 或 rel="apple-touch-icon" 時，這些屬性會生效

這些屬性在所有情況下都適用

  • href：一個字串。連結資源的 URL。
  • crossOrigin：一個字串。要使用的CORS 政策。可能的值為 anonymous 和 use-credentials。當 as 設定為 "fetch" 時，此屬性為必需。
  • referrerPolicy：一個字串。擷取資源時要傳送的Referrer 標頭。可能的值為 no-referrer-when-downgrade（預設值）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。
  • fetchPriority：一個字串。建議資源擷取的相對優先順序。可能的值為 auto（預設值）、high 和 low。
  • hrefLang：一個字串。連結資源的語言。
  • integrity：一個字串。資源的加密雜湊值，用於驗證其真實性。
  • type：一個字串。連結資源的 MIME 類型。

不建議與 React 一起使用的屬性

  • blocking：一個字串。如果設定為 "render"，則指示瀏覽器在載入樣式表之前不要渲染頁面。React 使用 Suspense 提供更精細的控制。

特殊渲染行為

無論在 React 樹中的哪個位置渲染，React 總是會將對應於 <link> 組件的 DOM 元素放置在文件的 <head> 中。<head> 是 DOM 中 <link> 存在的唯一有效位置，但如果代表特定頁面的組件可以自行渲染 <link> 組件，則會很方便並保持事物的可組合性。

有一些例外情況

  • 如果 <link> 具有 rel="stylesheet" 屬性，則它還必須具有 precedence 屬性才能獲得這種特殊行為。這是因為文件中樣式表的順序很重要，因此 React 需要知道如何相對於其他樣式表對此樣式表進行排序，您可以使用 precedence 屬性指定。如果省略 precedence 屬性，則沒有特殊行為。
  • 如果 `<link> 含有 itemProp 屬性，則不會有任何特殊行為，因為在這種情況下，它並不適用於整個文件，而是代表頁面特定部分的元數據。
  • 如果 `<link> 含有 onLoad 或 onError 屬性，也不會觸發特殊行為，因為這種情況下，您正在 React 組件內手動管理連結資源的載入。

樣式表的特殊行為

此外，如果 `<link> 指向樣式表（也就是在其屬性中包含 rel="stylesheet"），React 會以以下特殊方式處理它：

  • 渲染 `<link> 的組件會在樣式表載入時 暫停。
  • 如果多個組件渲染指向同一樣式表的連結，React 會將它們去重複，只在 DOM 中放置一個連結。如果兩個連結具有相同的 href 屬性，則它們被視為相同。

此特殊行為有兩個例外：

  • 如果連結沒有 precedence 屬性，則不會有任何特殊行為，因為文件中樣式表的順序很重要，因此 React 需要知道如何排序此樣式表與其他樣式表的相對順序，您可以使用 precedence 屬性指定。
  • 如果您提供任何 onLoad、onError 或 disabled 屬性，則不會有任何特殊行為，因為這些屬性表示您正在組件內手動管理樣式表的載入。

這種特殊處理方式有兩個注意事項：

  • 在渲染連結後，React 將忽略屬性的更改。（如果發生這種情況，React 將在開發過程中發出警告。）
  • 即使渲染連結的組件已卸載，React 也可能會將連結保留在 DOM 中。

用法

連結到相關資源

您可以使用指向相關資源（例如圖示、規範 URL 或 pingback）的連結來註釋文件。 React 會將此元數據放置在文件 `<head>` 中，無論它在 React 樹中的哪個位置渲染。

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function BlogPage() {
  return (
    <ShowRenderedHTML>
      <link rel="icon" href="favicon.ico" />
      <link rel="pingback" href="http://www.example.com/xmlrpc.php" />
      <h1>My Blog</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

連結到樣式表

如果組件依賴於特定樣式表才能正確顯示，您可以在組件內渲染指向該樣式表的連結。您的組件會在樣式表載入時 暫停。您必須提供 precedence 屬性，該屬性會告訴 React 將此樣式表放置在其他樣式表的相對位置 — 具有較高優先級的樣式表可以覆蓋具有較低優先級的樣式表。

注意事項

當您想要使用樣式表時，呼叫 preinit 函式可能會有好處。呼叫此函式可能允許瀏覽器比僅渲染 `<link>` 組件更早開始擷取樣式表，例如通過發送 HTTP Early Hints 回應。

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <link rel="stylesheet" href="sitemap.css" precedence="medium" />
      <p>...</p>
    </ShowRenderedHTML>
  );
}

控制樣式表優先順序

樣式表可能彼此衝突，當它們發生衝突時，瀏覽器會選擇文件中較晚出現的樣式表。 React 允許您使用 precedence 屬性控制樣式表的順序。在此範例中，兩個組件渲染樣式表，即使渲染它的組件較早出現，具有較高優先級的樣式表也會在文件中較晚出現。

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <FirstComponent />
      <SecondComponent />
      ...
    </ShowRenderedHTML>
  );
}

function FirstComponent() {
  return <link rel="stylesheet" href="first.css" precedence="high" />;
}

function SecondComponent() {
  return <link rel="stylesheet" href="second.css" precedence="low" />;
}

去重複樣式表渲染

如果您從多個組件渲染同一樣式表，React 只會在文件標頭中放置一個 `<link>`。

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <Component />
      <Component />
      ...
    </ShowRenderedHTML>
  );
}

function Component() {
  return <link rel="stylesheet" href="styles.css" precedence="medium" />;
}

使用連結標註文件中的特定項目

您可以使用帶有 itemProp 屬性的 <link> 元件，使用指向相關資源的連結來標註文件中的特定項目。在這種情況下，React *不會* 將這些註釋放在文件 <head> 中，而是像放置其他任何 React 元件一樣放置它們。

<section itemScope>
  <h3>Annotating specific items</h3>
  <link itemProp="author" href="http://example.com/" />
  <p>...</p>
</section>
上一頁<textarea>
下一頁<meta>