Skip to content

Commit 8d8aa35

Browse files
committed
1. Update translations in the glossary.
2. Modify part description.
1 parent bcf53a5 commit 8d8aa35

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

content/docs/forwarding-refs.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ Ref 转发是一项将 [ref](/docs/refs-and-the-dom.html) 自动地通过组件
1111
考虑这个渲染原生 DOM 元素 `button``FancyButton` 组件:
1212
`embed:forwarding-refs/fancy-button-simple.js`
1313

14-
React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyButton` 的组件**通常不需要**获取内部的 DOM 元素 `button`[ref](/docs/refs-and-the-dom.html)这是极好的,因为其防止组件过度依赖其他组件的 DOM 结构。
14+
React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyButton` 的组件**通常不需要**获取内部的 DOM 元素 `button`[ref](/docs/refs-and-the-dom.html)这很好,因为这防止组件过度依赖其他组件的 DOM 结构。
1515

16-
虽然这种封装对类似 `FeedStory``Comment` 这样的应用级组件是理想的,但其对 `FancyButton``MyTextInput` 这样的高可重用“叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM `button``input` 的方式被使用,并且访问其 DOM 节点对管理焦点,选中或动画来说是不可避免的。
16+
虽然这种封装对类似 `FeedStory``Comment` 这样的应用级组件是理想的,但其对 `FancyButton``MyTextInput` 这样的高可复用“叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM `button``input` 的方式被使用,并且访问其 DOM 节点对管理焦点,选中或动画来说是不可避免的。
1717

18-
**Ref 转发是一个可选的特性,其允许某些组件接收 `ref`,并将其向下传递(换句话说,“转发”它)给子组件。**
18+
**Ref 转发是一个可选特性,其允许某些组件接收 `ref`,并将其向下传递(换句话说,“转发”它)给子组件。**
1919

2020
在下面的示例中,`FancyButton` 使用 `React.forwardRef` 来获取传递给它的 `ref`,然后转发到它渲染的 DOM `button`
2121

@@ -33,13 +33,13 @@ React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyB
3333

3434
>注意
3535
>
36-
>第二个参数 `ref` 只在使用 `React.forwardRef` 定义组件时存在。常规函数和类定义组件不接收 `ref` 参数,且 props 中也不存在 `ref`
36+
>第二个参数 `ref` 只在使用 `React.forwardRef` 定义组件时存在。常规函数和 class 组件不接收 `ref` 参数,且 props 中也不存在 `ref`
3737
>
38-
>Ref 转发不仅仅限制在 DOM 组件中,你也可以转发 refs 到类定义组件实例中
38+
>Ref 转发不仅限于 DOM 组件,你也可以转发 refs 到 class 组件实例中
3939
4040
## 组件库维护者的注意事项 {#note-for-component-library-maintainers}
4141

42-
**当你开始在组件库中使用 `forwardRef` 时,你应当将其作为一个破坏性更改,并发布库的一个新的主板本。** 这是因为你的库可能会有明显不同的行为(例如 refs 被分配给了什么,以及导出了什么类型),并且这样可能会导致依赖旧行为的应用和其他库崩溃。
42+
**当你开始在组件库中使用 `forwardRef` 时,你应当将其视为一个破坏性更改,并发布库的一个新的主板本。** 这是因为你的库可能会有明显不同的行为(例如 refs 被分配给了什么,以及导出了什么类型),并且这样可能会导致依赖旧行为的应用和其他库崩溃。
4343

4444
出于同样的原因,当 `React.forwardRef` 存在时有条件地使用它也是不推荐的:它改变了你的库的行为,并在升级 React 自身时破环用户的应用。
4545

@@ -48,22 +48,22 @@ React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyB
4848
这个技巧对[高阶组件](/docs/higher-order-components.html)(也被称为 HOC)特别有用。让我们从一个输出组件 props 到控制台的 HOC 示例开始:
4949
`embed:forwarding-refs/log-props-before.js`
5050

51-
“logProps” HOC 透传(pass through)所有 `props` 到其包裹的组件,所以渲染结果将是相同的。示例:我们可以使用该 HOC 记录所有传递到 “fancy button” 组件的 props:
51+
“logProps” HOC 透传(pass through)所有 `props` 到其包裹的组件,所以渲染结果将是相同的。例如:我们可以使用该 HOC 记录所有传递到 “fancy button” 组件的 props:
5252
`embed:forwarding-refs/fancy-button.js`
5353

5454
上面的示例有一点需要注意:refs 将不会透传下去。这是因为 `ref` 不是 prop 属性。就像 `key` 一样,其被 React 进行了特殊处理。如果你对 HOC 添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。
5555

56-
这意味着用于我们 `FancyButton` 组件的 refs 实际上将被挂载到了 `LogProps` 组件:
56+
这意味着用于我们 `FancyButton` 组件的 refs 实际上将被挂载到 `LogProps` 组件:
5757
`embed:forwarding-refs/fancy-button-ref.js`
5858

59-
幸运的是,我们可以使用 `React.forwardRef` API 明确地将 refs 转发到内部的 `FancyButton` 组件。`React.forwardRef` 接受一个渲染函数,其接收 `props``ref` 参数并返回一个 React 节点。示例
59+
幸运的是,我们可以使用 `React.forwardRef` API 明确地将 refs 转发到内部的 `FancyButton` 组件。`React.forwardRef` 接受一个渲染函数,其接收 `props``ref` 参数并返回一个 React 节点。例如
6060
`embed:forwarding-refs/log-props-after.js`
6161

6262
## 在 DevTools 中显示自定义名称 {#displaying-a-custom-name-in-devtools}
6363

6464
`React.forwardRef` 接受一个渲染函数。React DevTools 使用该函数来决定为 ref 转发组件显示的内容。
6565

66-
示例,以下组件将在 DevTools 中显示为 “*ForwardRef*”:
66+
例如,以下组件将在 DevTools 中显示为 “*ForwardRef*”:
6767

6868
`embed:forwarding-refs/wrapped-component.js`
6969

0 commit comments

Comments
 (0)