You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*`render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
`forwardRef`returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef`is also able to receive a `ref`prop.
*In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
*`props`: The props passed by the parent component.
67
+
*`props`：父组件传递过来的参数。
68
68
69
-
*`ref`: The `ref`attribute passed by the parent component. The `ref`can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref`you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle)
`forwardRef`returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef`is able to take a `ref`prop.
### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
79
+
### 将 DOM 节点暴露给父组件 {/*exposing-a-dom-node-to-the-parent-component*/}
80
80
81
-
By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
81
+
默认情况下，每个组件的 DOM 节点都是私有的。然而，有时候将 DOM 节点公开给父组件是很有用的，比如允许对它进行聚焦。如果你想将其公开，可以将组件定义包装在 `forwardRef()` 中：
This`Form`component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref)to `MyInput`. The `MyInput`component *forwards* that ref to the `<input>`browser tag. As a result, the `Form`component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
136
+
请记住，将组件内部的 ref 暴露给 DOM 节点会使得在稍后更改组件内部更加困难。通常，你会将 DOM 节点从可重用的低级组件中暴露出来，例如按钮或文本输入框，但不会在应用程序级别的组件中这样做，例如头像或评论。
137
137
138
138
<Recipestitle="Examples of forwarding a ref">
139
139
140
-
#### Focusing a text input {/*focusing-a-text-input*/}
140
+
#### 聚焦文本输入框 {/*focusing-a-text-input*/}
141
141
142
-
Clicking the button will focus the input. The `Form`component defines a ref and passes it to the `MyInput`component. The `MyInput`component forwards that ref to the browser `<input>`. This lets the `Form`component focus the `<input>`.
#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
194
+
#### 播放和暂停视频 {/*playing-and-pausing-a-video*/}
195
195
196
-
Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play)and[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)on a `<video>` DOM node. The `App`component defines a ref and passes it to the `MyVideoPlayer`component. The `MyVideoPlayer`component forwards that ref to the browser `<video>`node. This lets the `App`component play and pause the `<video>`.
The `Form`component defines a ref and passes it to `FormField`. The `FormField`component forwards that ref to`MyInput`, which forwards it to a browser `<input>` DOM node. This is how `Form`accesses that DOM node.
292
+
`Form`组件定义了一个 ref 并将其传递给 `FormField`。`FormField`组件将该 ref 转发给`MyInput`，后者又将其转发给浏览器的 `<input>` DOM 节点。这就是 `Form`获取该 DOM 节点的方式。
293
293
294
294
295
295
<Sandpack>
@@ -367,9 +367,9 @@ input, button {
367
367
368
368
---
369
369
370
-
### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
370
+
### 暴露一个命令式句柄而不是 DOM 节点 {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
371
371
372
-
Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
372
+
可以使用一个被称为 **命令式句柄（imperative handle）** 的自定义对象来暴露一个更加受限制的方法集，而不是暴露整个 DOM 节点。为了实现这个目的，你需要定义一个单独的 ref 来存储 DOM 节点：
If some component gets a ref to `MyInput`, it will only receive your `{ focus, scrollIntoView }`object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
407
+
如果某个组件得到了 `MyInput` 的 ref，则只会接收到 `{ focus, scrollIntoView }`对象，而不是整个 DOM 节点。这可以让 DOM 节点暴露的信息限制到最小。
408
408
409
409
<Sandpack>
410
410
@@ -417,7 +417,7 @@ export default function Form() {
417
417
418
418
functionhandleClick() {
419
419
ref.current.focus();
420
-
//This won't work because the DOM node isn't exposed:
420
+
//这行代码不起作用，因为 DOM 节点没有被暴露出来：
421
421
// ref.current.style.opacity = 0.5;
422
422
}
423
423
@@ -463,25 +463,26 @@ input {
463
463
464
464
</Sandpack>
465
465
466
-
[Read more about using imperative handles.](/reference/react/useImperativeHandle)
**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
### My component is wrapped in `forwardRef`, but the `ref`to it is always`null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
If`showInput`is`false`, then the ref won't be forwarded to any node, and a ref to `MyInput`will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like `Panel` in this example:
0 commit comments