<link>

内置浏览器 <link> 组件允许你使用外部资源，例如样式表，或使用链接元数据注释文档。

🌐 The built-in browser <link> component lets you use external resources such as stylesheets or annotate the document with link metadata.

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

参考
- <link>
用法

参考

🌐 Reference

`<link>`

要链接到外部资源，例如样式表、字体和图标，或使用链接元数据注释文档，请渲染内置浏览器 <link> 组件。你可以从任何组件渲染 <link>，并且 React 会在大多数情况下将相应的 DOM 元素放置在文档头部。

🌐 To link to external resources such as stylesheets, fonts, and icons, or to annotate the document with link metadata, render the built-in browser <link> component. You can render <link> from any component and React will in most cases place the corresponding DOM element in the document head.

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

查看更多示例。

属性

🌐 Props

<link> 支持所有常用元素属性

rel：一个字符串，必需的。指定与资源的关系。React将带有rel="stylesheet"的链接与其他链接区别对待。

当 rel="stylesheet" 时，这些属性适用：

🌐 These props apply when rel="stylesheet":

precedence：一个字符串。告诉 React <link> DOM 节点在文档 <head> 中相对于其他节点的排序位置，这决定了哪个样式表可以覆盖另一个。React 会推断它先发现的优先级值是“较低”的，而后发现的优先级值是“较高”的。许多样式系统可以使用单一优先级值正常工作，因为样式规则是原子的。具有相同优先级的样式表无论是 <link> 还是内联的 <style> 标签，或者使用 preinit 函数加载的，都可以放在一起。
media：一个字符串。将样式表限制为某个特定的媒体查询。
title：一个字符串。指定备用样式表的名称。

当 rel="stylesheet" 时，这些属性适用，但会禁用 React 对样式表的特殊处理：

🌐 These props apply when rel="stylesheet" but disable React’s special treatment of stylesheets:

disabled：一个布尔值。禁用样式表。
onError：一个函数。当样式表加载失败时调用。
onLoad：一个函数。在样式表加载完成时调用。

当 rel="preload" 或 rel="modulepreload" 时，这些属性适用：

🌐 These props apply when rel="preload" or 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" 时，这些属性适用：

🌐 These props apply when rel="icon" or rel="apple-touch-icon":

sizes：一个字符串。图标的尺寸。

这些属性适用于所有情况：

🌐 These props apply in all cases:

href：一个字符串。链接资源的 URL。
crossOrigin：一个字符串。要使用的 CORS 策略。其可能的值为 anonymous 和 use-credentials。当 as 设置为 "fetch" 时，此项为必填项。
referrerPolicy：一个字符串。获取时要发送的 Referrer header。它的可能值是 no-referrer-when-downgrade（默认值）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。
fetchPriority：一个字符串。表示获取资源的相对优先级。可能的值为 auto（默认）、high 和 low。
hrefLang：一个字符串。链接资源的语言。
integrity：一个字符串。资源的加密哈希，用于验证其真实性。
type：一个字符串。所链接资源的 MIME 类型。

不推荐在 React 中使用的属性：

🌐 Props that are not recommended for use with React:

blocking：一个字符串。如果设置为 "render"，指示浏览器在样式表加载完成之前不要渲染页面。React 提供了使用 Suspense 的更精细控制。

特殊渲染行为

🌐 Special rendering behavior

React 将始终将对应于 <link> 组件的 DOM 元素放置在文档的 <head> 内，无论它在 React 树中的渲染位置如何。<head> 是 <link> 在 DOM 中存在的唯一有效位置，但如果表示特定页面的组件可以自己渲染 <link> 组件，这样既方便又保持组合性。

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

但也有一些例外：

🌐 There are a few exceptions to this:

如果 <link> 有一个 rel="stylesheet" 属性，那么它也必须有一个 precedence 属性才能获得这种特殊行为。这是因为文档中样式表的顺序很重要，所以 React 需要知道如何将这个样式表相对于其他样式表排序，你可以使用 precedence 属性来指定。如果省略 precedence 属性，则不会有特殊行为。
如果 <link> 有一个 itemProp 属性，没有特殊行为，因为在这种情况下它不适用于文档，而是表示页面特定部分的元数据。
如果 <link> 有 onLoad 或 onError 属性，因为在这种情况下，你是在 React 组件中手动管理链接资源的加载。

样式表的特殊行为

🌐 Special behavior for stylesheets

此外，如果 <link> 指向一个样式表（即，它在其属性中有 rel="stylesheet"），React 会以以下特殊方式处理它：

🌐 In addition, if the <link> is to a stylesheet (namely, it has rel="stylesheet" in its props), React treats it specially in the following ways:

渲染 <link> 的组件在样式表加载时会suspend。
如果多个组件渲染指向同一样式表的链接，React 会去重它们，并且只在 DOM 中放置一个链接。如果两个链接具有相同的 href 属性，则认为它们相同。

这种特殊行为有两个例外：

🌐 There are two exception to this special behavior:

如果链接没有 precedence 属性，就不会有特殊的行为，因为文档中样式表的顺序很重要，所以 React 需要知道如何将此样式表相对于其他样式表进行排序，你可以使用 precedence 属性来指定。
如果你提供任何 onLoad、onError 或 disabled 属性，则不会有特殊行为，因为这些属性表示你在组件中手动管理样式表的加载。

这种特殊处理有两个注意事项：

🌐 This special treatment comes with two caveats:

在链接渲染之后，React 会忽略对 props 的更改。（如果发生这种情况，React 会在开发环境中发出警告。）
即使渲染链接的组件已被卸载，React 也可能会将链接保留在 DOM 中。

用法

🌐 Usage

🌐 Linking to related resources

你可以在文档中使用指向相关资源的链接进行注释，例如图标、规范 URL 或 pingback。React 会将这些元数据放置在文档 <head> 中，无论它在 React 树的哪个位置渲染。

🌐 You can annotate the document with links to related resources such as an icon, canonical URL, or pingback. React will place this metadata within the document <head> regardless of where in the React tree it is rendered.

复刻

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>
  );
}

链接到样式表

🌐 Linking to a stylesheet

如果一个组件依赖某个样式表才能正确显示，你可以在组件中渲染指向该样式表的链接。在样式表加载时，你的组件将会挂起。你必须提供 precedence 属性，该属性告诉 React 将该样式表相对于其他样式表放置的位置——优先级更高的样式表可以覆盖优先级较低的样式表。

🌐 If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will suspend while the stylesheet is loading. You must supply the precedence prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.

注意

当你想使用样式表时，调用 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>
  );
}

控制样式表优先级

🌐 Controlling stylesheet precedence

样式表可能会相互冲突，当发生冲突时，浏览器会选择文档中后出现的样式表。React 允许你使用 precedence 属性控制样式表的顺序。在这个例子中，三个组件渲染样式表，具有相同优先级的样式表会被分组到 <head> 中。

🌐 Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the precedence prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the <head>.

复刻

import ShowRenderedHTML from './ShowRenderedHTML.js';

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

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

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

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

请注意，precedence 的值本身是任意的，其命名由你决定。React 会推断它最先发现的优先级值为“较低”，最晚发现的优先级值为“较高”。

🌐 Note the precedence values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are “lower” and precedence values it discovers later are “higher”.

去重样式表渲染

🌐 Deduplicated stylesheet rendering

如果你从多个组件渲染相同的样式表，React 会在文档头部只放置一个 <link>。

🌐 If you render the same stylesheet from multiple components, React will place only a single <link> in the document head.

复刻

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" />;
}

使用链接注释文档中的特定条目

🌐 Annotating specific items within the document with links

你可以使用 <link> 组件和 itemProp 属性为文档中的特定项目添加指向相关资源的注释。在这种情况下，React 不会将这些注释放置在文档 <head> 中，而是会像放置其他 React 组件一样放置它们。

🌐 You can use the <link> component with the itemProp prop to annotate specific items within the document with links to related resources. In this case, React will not place these annotations within the document <head> but will place them like any other React component.

<section itemScope>
  <h3>Annotating specific items</h3>
  <link itemProp="author" href="http://example.com/" />
  <p>...</p>
</section>

上一章<textarea>

下一章<meta>

<link>

参考

<link>

属性

特殊渲染行为

样式表的特殊行为

用法

链接到相关资源

链接到样式表

注意

控制样式表优先级

去重样式表渲染

使用链接注释文档中的特定条目

`<link>`