Skip to content

Commit

Permalink
fix: resolve conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
Yucohny authored Mar 15, 2024
1 parent 1e49368 commit c182bf2
Showing 1 changed file with 2 additions and 19 deletions.
21 changes: 2 additions & 19 deletions src/content/reference/react-dom/components/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,7 @@ React 对 `<link>` 的扩展当前仅在 React Canary 与 experimental 渠道中

#### 特殊的渲染行为 {/*special-rendering-behavior*/}

<<<<<<< HEAD
无论 `<link>` 组件在 React 树中的哪个位置被渲染,React 都会始终将其对应的 DOM 元素放在文档的 `<head>` 中。`<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.
>>>>>>> 1a839ff74e40f40a1a8ea6ae1d4837b68696550c

但是,有几个例外情况:

Expand All @@ -96,13 +92,8 @@ React will always place the DOM element corresponding to the `<link>` component

此外,如果 `<link>` 指向的是样式表(即,在其属性中具有 `rel="stylesheet"`),React 会以以下方式对其进行特殊处理:

<<<<<<< HEAD
* 渲染 `<link>` 的组件将在样式表加载时进行 [挂起](http://localhost:3000/reference/react/Suspense)
* 渲染 `<link>` 的组件将在样式表加载时进行 [挂起](/reference/react/Suspense)
* 如果多个组件渲染指向相同样式表的链接,React 将对它们进行去重,并只将单个链接放入 DOM 中。如果两个链接具有相同的 `href` 属性,则认为它们是相同的。
=======
* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
* If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop.
>>>>>>> 1a839ff74e40f40a1a8ea6ae1d4837b68696550c

但是,有两个例外情况:

Expand Down Expand Up @@ -143,11 +134,7 @@ export default function BlogPage() {

### 链接到样式表 {/*linking-to-a-stylesheet*/}

<<<<<<< HEAD
如果一个组件依赖于某个样式表以正确显示,可以在组件内部渲染一个指向该样式表的链接。当样式表加载时,组件将会 [挂起](http://localhost:3000/reference/react/Suspense)。因此必须提供 `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](/reference/react/Suspense) 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.
>>>>>>> 1a839ff74e40f40a1a8ea6ae1d4837b68696550c
如果一个组件依赖于某个样式表以正确显示,可以在组件内部渲染一个指向该样式表的链接。当样式表加载时,组件将会 [挂起](/reference/react/Suspense)。因此必须提供 `precedence` 属性,该属性告诉 React 将此样式表放置在其他样式表的何处——具有较高优先级的样式表可以覆盖较低优先级的样式表。

<Note>
当想使用样式表时,调用 [preinit](/reference/react-dom/preinit) 函数可能是有益的。调用此函数可能使浏览器比仅渲染一个 `<link>` 组件更早地开始获取样式表,例如通过发送 [HTTP 103 Early Hints 响应](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/103)
Expand Down Expand Up @@ -231,11 +218,7 @@ function Component() {

### 使用链接为文档中的特定项添加注释 {/*annotating-specific-items-within-the-document-with-links*/}

<<<<<<< HEAD
可以使用带有 `itemProp` 属性的 `<link>` 组件来为文档中的特定项添加链接到相关资源的注释。在这种情况下,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.
>>>>>>> 1a839ff74e40f40a1a8ea6ae1d4837b68696550c

```js
<section itemScope>
Expand Down

0 comments on commit c182bf2

Please sign in to comment.