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

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

参考

<link>

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

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

请参见下面的更多示例。

属性

<link> 支持所有通用的元素属性。

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

  • precedence：字符串。告诉 React 如何根据文档 <head> 中的其他元素对 <link> DOM 节点的排名，这决定了哪个样式表可以覆盖另一个样式表。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> 是 <link> 在 DOM 中存在的唯一有效位置，但是，如果表示特定页面的组件本身可以渲染 <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" />;
}

使用链接为文档中的特定项目添加注释

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

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