diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 739c94ae2..0064128e5 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -4,7 +4,7 @@ title: forwardRef -`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs) +`forwardRef` は、親コンポーネントに対して DOM ノードを [ref](/learn/manipulating-the-dom-with-refs) として公開できるようにします。 ```js const SomeComponent = forwardRef(render) @@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +`forwardRef()` を呼び出すことで、コンポーネントが ref を受け取ってそれを子コンポーネントに転送 (forward) できるようになります。 ```js import { forwardRef } from 'react'; @@ -30,26 +30,26 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `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. +* `render`: コンポーネントのレンダー関数です。React はこの関数を親から受け取った props および `ref` とともに呼び出します。返す JSX がコンポーネントの出力となります。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`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. +`forwardRef` は JSX でレンダーできる React コンポーネントを返します。プレーンな関数として定義された React コンポーネントとは異なり、`forwardRef` によって返されるコンポーネントは `ref` 属性を受け取ることもできます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* 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. +* Strict Mode では、React は[レンダー関数が誤って純関数でなくなってしまう問題を見つけやすくする](#my-initializer-or-updater-function-runs-twice)ため、**レンダー関数を 2 回呼び出します**。これは開発環境専用の挙動であり、本番環境には影響しません。レンダー関数が純粋である場合（そうであるべきです）、これはコンポーネントのロジックに影響を与えません。呼び出しのうちの一方からの結果は無視されます。 --- -### `render` function {/*render-function*/} +### `render` 関数 {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` は引数としてレンダー関数を受け取ります。React はこの関数を `props` および `ref` とともに呼び出します。 ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -62,23 +62,23 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -#### Parameters {/*render-parameters*/} +#### 引数 {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: 親コンポーネントから渡された props です。 -* `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) +* `ref`: 親コンポーネントから渡された `ref` 属性です。`ref` はオブジェクトの場合と関数の場合があります。親コンポーネントが ref を渡していない場合は `null` になります。受け取った `ref` は、別のコンポーネントに渡すか、[`useImperativeHandle`](/reference/react/useImperativeHandle) に渡します。 -#### Returns {/*render-returns*/} +#### 返り値 {/*render-returns*/} -`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. +`forwardRef` は JSX でレンダーできる React コンポーネントを返します。プレーンな関数として定義された React コンポーネントとは異なり、`forwardRef` によって返されるコンポーネントは `ref` 属性を受け取ることができます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### 親コンポーネントに DOM ノードを公開する {/*exposing-a-dom-node-to-the-parent-component*/} -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()`: +デフォルトでは、各コンポーネント内の DOM ノードはプライベートです。しかし、時には親に DOM ノードを公開することが有用な場合があります。例えば、ノードにフォーカスを当てることを許可したい場合です。これを明示的に許可するために、コンポーネント定義を `forwardRef()` でラップします。 ```js {3,11} import { forwardRef } from 'react'; @@ -94,7 +94,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose: +props の後の第 2 引数として ref が渡されます。公開したい DOM ノードにそれを渡してください。 ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -110,7 +110,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -This lets the parent `Form` component access the `` DOM node exposed by `MyInput`: +これで、親の `Form` コンポーネントが、`MyInput` によって公開された `` DOM ノードにアクセスできるようになります。 ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -131,15 +131,15 @@ function Form() { } ``` -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 `` browser tag. As a result, the `Form` component can access that `` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it. +この `Form` コンポーネントは `MyInput` に [ref を渡しています](/reference/react/useRef#manipulating-the-dom-with-a-ref)。`MyInput` コンポーネントはその ref をブラウザの `` タグに*転送*しています。その結果、`Form` コンポーネントはこの `` DOM ノードにアクセスし、[`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) を呼び出すことができるようになります。 -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. +コンポーネント内の DOM ノードへの ref を公開することで、後でコンポーネントの内部を変更するのが難しくなることに注意してください。通常は、ボタンやテキスト入力フィールドなどの再利用可能な低レベルコンポーネントからは DOM ノードの公開を行いますが、アバターやコメントのようなアプリケーションレベルのコンポーネントでは行いません。 - + -#### Focusing a text input {/*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 ``. This lets the `Form` component focus the ``. +ボタンをクリックすると、入力フィールドにフォーカスが当てられます。`Form` コンポーネントは ref を定義し、それを `MyInput` コンポーネントに渡します。`MyInput` コンポーネントはその ref をブラウザの `` に転送します。これにより、`Form` コンポーネントは `` にフォーカスを当てられるようになります。 @@ -191,9 +191,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### ビデオの再生と一時停止 {/*playing-and-pausing-a-video*/} -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 `