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`: 親コンポーネントから渡された 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
+
コンポーネント内の DOM ノードへの ref を公開することで、後でコンポーネントの内部を変更するのが難しくなることに注意してください。通常は、ボタンやテキスト入力フィールドなどの再利用可能な低レベルコンポーネントからは DOM ノードの公開を行いますが、アバターやコメントのようなアプリケーションレベルのコンポーネントでは行いません。
137
137
138
-
<Recipestitle="Examples of forwarding a ref">
138
+
<Recipestitle="ref の転送の例">
139
139
140
-
#### Focusing a text input {/*focusing-a-text-input*/}
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>`.
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` に転送し、`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
+
DOM ノードをまるごと公開する代わりに、使用できるメソッドを制限したカスタムオブジェクトである、*命令型ハンドル (imperative handle)* を公開することができます。これを行うには、DOM ノードを保持するための別の ref を定義します。
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.
**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