@@ -11,11 +11,11 @@ Ref 转发是一项将 [ref](/docs/refs-and-the-dom.html) 自动地通过组件
11
11
考虑这个渲染原生 DOM 元素 ` button ` 的 ` FancyButton ` 组件:
12
12
` embed:forwarding-refs/fancy-button-simple.js `
13
13
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 结构。
15
15
16
- 虽然这种封装对类似 ` FeedStory ` 或 ` Comment ` 这样的应用级组件是理想的,但其对 ` FancyButton ` 或 ` MyTextInput ` 这样的高可重用 “叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM ` button ` 和 ` input ` 的方式被使用,并且访问其 DOM 节点对管理焦点,选中或动画来说是不可避免的。
16
+ 虽然这种封装对类似 ` FeedStory ` 或 ` Comment ` 这样的应用级组件是理想的,但其对 ` FancyButton ` 或 ` MyTextInput ` 这样的高可复用 “叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM ` button ` 和 ` input ` 的方式被使用,并且访问其 DOM 节点对管理焦点,选中或动画来说是不可避免的。
17
17
18
- ** Ref 转发是一个可选的特性 ,其允许某些组件接收 ` ref ` ,并将其向下传递(换句话说,“转发”它)给子组件。**
18
+ ** Ref 转发是一个可选特性 ,其允许某些组件接收 ` ref ` ,并将其向下传递(换句话说,“转发”它)给子组件。**
19
19
20
20
在下面的示例中,` FancyButton ` 使用 ` React.forwardRef ` 来获取传递给它的 ` ref ` ,然后转发到它渲染的 DOM ` button ` :
21
21
@@ -33,13 +33,13 @@ React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyB
33
33
34
34
> 注意
35
35
>
36
- > 第二个参数 ` ref ` 只在使用 ` React.forwardRef ` 定义组件时存在。常规函数和类定义组件不接收 ` ref ` 参数,且 props 中也不存在 ` ref ` 。
36
+ > 第二个参数 ` ref ` 只在使用 ` React.forwardRef ` 定义组件时存在。常规函数和 class 组件不接收 ` ref ` 参数,且 props 中也不存在 ` ref ` 。
37
37
>
38
- > Ref 转发不仅仅限制在 DOM 组件中 ,你也可以转发 refs 到类定义组件实例中 。
38
+ > Ref 转发不仅限于 DOM 组件 ,你也可以转发 refs 到 class 组件实例中 。
39
39
40
40
## 组件库维护者的注意事项 {#note-for-component-library-maintainers}
41
41
42
- ** 当你开始在组件库中使用 ` forwardRef ` 时,你应当将其作为一个破坏性更改 ,并发布库的一个新的主板本。** 这是因为你的库可能会有明显不同的行为(例如 refs 被分配给了什么,以及导出了什么类型),并且这样可能会导致依赖旧行为的应用和其他库崩溃。
42
+ ** 当你开始在组件库中使用 ` forwardRef ` 时,你应当将其视为一个破坏性更改 ,并发布库的一个新的主板本。** 这是因为你的库可能会有明显不同的行为(例如 refs 被分配给了什么,以及导出了什么类型),并且这样可能会导致依赖旧行为的应用和其他库崩溃。
43
43
44
44
出于同样的原因,当 ` React.forwardRef ` 存在时有条件地使用它也是不推荐的:它改变了你的库的行为,并在升级 React 自身时破环用户的应用。
45
45
@@ -48,22 +48,22 @@ React 组件隐藏其实现细节,包括其渲染结果。其他使用 `FancyB
48
48
这个技巧对[ 高阶组件] ( /docs/higher-order-components.html ) (也被称为 HOC)特别有用。让我们从一个输出组件 props 到控制台的 HOC 示例开始:
49
49
` embed:forwarding-refs/log-props-before.js `
50
50
51
- “logProps” HOC 透传(pass through)所有 ` props ` 到其包裹的组件,所以渲染结果将是相同的。示例 :我们可以使用该 HOC 记录所有传递到 “fancy button” 组件的 props:
51
+ “logProps” HOC 透传(pass through)所有 ` props ` 到其包裹的组件,所以渲染结果将是相同的。例如 :我们可以使用该 HOC 记录所有传递到 “fancy button” 组件的 props:
52
52
` embed:forwarding-refs/fancy-button.js `
53
53
54
54
上面的示例有一点需要注意:refs 将不会透传下去。这是因为 ` ref ` 不是 prop 属性。就像 ` key ` 一样,其被 React 进行了特殊处理。如果你对 HOC 添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。
55
55
56
- 这意味着用于我们 ` FancyButton ` 组件的 refs 实际上将被挂载到了 ` LogProps ` 组件:
56
+ 这意味着用于我们 ` FancyButton ` 组件的 refs 实际上将被挂载到 ` LogProps ` 组件:
57
57
` embed:forwarding-refs/fancy-button-ref.js `
58
58
59
- 幸运的是,我们可以使用 ` React.forwardRef ` API 明确地将 refs 转发到内部的 ` FancyButton ` 组件。` React.forwardRef ` 接受一个渲染函数,其接收 ` props ` 和 ` ref ` 参数并返回一个 React 节点。示例 :
59
+ 幸运的是,我们可以使用 ` React.forwardRef ` API 明确地将 refs 转发到内部的 ` FancyButton ` 组件。` React.forwardRef ` 接受一个渲染函数,其接收 ` props ` 和 ` ref ` 参数并返回一个 React 节点。例如 :
60
60
` embed:forwarding-refs/log-props-after.js `
61
61
62
62
## 在 DevTools 中显示自定义名称 {#displaying-a-custom-name-in-devtools}
63
63
64
64
` React.forwardRef ` 接受一个渲染函数。React DevTools 使用该函数来决定为 ref 转发组件显示的内容。
65
65
66
- 示例 ,以下组件将在 DevTools 中显示为 “* ForwardRef* ”:
66
+ 例如 ,以下组件将在 DevTools 中显示为 “* ForwardRef* ”:
67
67
68
68
` embed:forwarding-refs/wrapped-component.js `
69
69
0 commit comments