From a12e4d08f42f91a3412ad678f6f6bd6385cd6a95 Mon Sep 17 00:00:00 2001 From: Saki Date: Wed, 28 Jun 2023 15:29:06 -0700 Subject: [PATCH 1/4] Complete translation Translate up to line 289 --- .../reference/react/useImperativeHandle.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 88f9a9f12..d5468da9f 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -4,7 +4,7 @@ title: useImperativeHandle -`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs) +`useImperativeHandle` は、[ref](/learn/manipulating-the-dom-with-refs) として公開されるハンドルをカスタマイズするための React フックです。 ```js useImperativeHandle(ref, createHandle, dependencies?) @@ -16,11 +16,11 @@ useImperativeHandle(ref, createHandle, dependencies?) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/} -Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes: +`useImperativeHandle` をコンポーネントのトップレベルで呼び出し、公開される ref ハンドルをカスタマイズします。 ```js import { forwardRef, useImperativeHandle } from 'react'; @@ -34,27 +34,27 @@ const MyInput = forwardRef(function MyInput(props, ref) { // ... ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function) +* `ref`: [`forwardRef` render 関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。 -* `createHandle`: A function that takes no arguments and returns the ref handle you want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose. +* `createHandle`: 引数を受け取らず、公開したい ref ハンドルを返す関数です。ref ハンドルは任意の型が使えます。通常、公開したいメソッドを持つオブジェクトを返します。 -* **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref. +* **オプション** `dependencies`: `createHandle` のコード内でリファレンスされるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、およびコンポーネント内で直接宣言された変数と関数が含まれます。もし linter が [React 向けに設定](/learn/editor-setup#linting)されている場合、linter がすべてのリアクティブな値が依存関係として正しく指定されているかを確認します。依存関係のリストは、一定数の項目があり、[dep1, dep2, dep3]のようにインラインで記述される必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) の比較メソッドを使用して、各依存関係を以前の値と比較します。もし再レンダーが依存関係のいずれかに変更をもたらした場合、またはその引数を省略した場合、`createHandle` 関数が再実行され、新しく作成されたハンドルが ref に割り当てられます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`useImperativeHandle` returns `undefined`. +`useImperativeHandle` は `undefined` を返します。 --- -## Usage {/*usage*/} +## 使用方 {/*usage*/} -### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/} +### 親コンポーネントにカスタム ref ハンドルを公開する {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef) +デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) にオプトインする必要があります。 ```js {4} import { forwardRef } from 'react'; @@ -64,7 +64,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -With the code above, [a ref to `MyInput` will receive the `` DOM node.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component: +上記のコードでは、[`MyInput` の ref は `` DOM ノードを受け取ります。](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component)ただし、代わりにカスタムな値を公開することもできます。公開されるハンドルをカスタマイズするには、コンポーネントのトップレベルで `useImperativeHandle` を呼び出します。 ```js {4-8} import { forwardRef, useImperativeHandle } from 'react'; @@ -72,7 +72,7 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... your methods ... + // ... あなたのメソッド ... }; }, []); @@ -80,9 +80,9 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Note that in the code above, the `ref` is no longer forwarded to the ``. +上記のコードでは、`ref` が `` に受け渡しされなくなっていることに注意してください。 -For example, suppose you don't want to expose the entire `` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call: +例えば、`` DOM ノード全体を公開するのではなく、その 2 つのメソッド、`focus` と `scrollIntoView` を公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持します。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出したいメソッドのみを含むハンドルを公開します。 ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `` DOM node. +これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは基礎となる `` DOM ノードへの完全なアクセス権は持ちません。 @@ -118,7 +118,7 @@ export default function Form() { function handleClick() { ref.current.focus(); - // This won't work because the DOM node isn't exposed: + // DOM ノードが公開されていないため、これでは機能しません。 // ref.current.style.opacity = 0.5; } @@ -166,9 +166,9 @@ input { --- -### Exposing your own imperative methods {/*exposing-your-own-imperative-methods*/} +### 独自の命令型メソッドを公開する {/*exposing-your-own-imperative-methods*/} -The methods you expose via an imperative handle don't have to match the DOM methods exactly. For example, this `Post` component exposes a `scrollAndFocusAddComment` method via an imperative handle. This lets the parent `Page` scroll the list of comments *and* focus the input field when you click the button: +命令型ハンドルを介して公開するメソッドは、DOM メソッドと正確に一致する必要はありません。例えば、この `Post` コンポーネントは、命令型ハンドルを介して `scrollAndFocusAddComment` メソッドを公開します。これにより、ボタンをクリックすると、親である `Page` がコメントのリストをスクロールできる*だけでなく*、入力フィールドにフォーカスもできるようになります。 @@ -281,8 +281,8 @@ export default AddComment; -**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. +**ref の過度な使用に注意してください。**ref は、prop として表現できない、*命令形式*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。 -**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 ``. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props. +**何かを prop として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令形式のハンドルを公開するのではなく、``のように、`isOpen` を prop として受け取る方が良いでしょう。[エフェクト](/learn/synchronizing-with-effects)を使用することで、命令形式の動作をプロップとして公開することができます。 From 03a32e6b152b4009df3adc53185f380c15338bb5 Mon Sep 17 00:00:00 2001 From: Saki Date: Mon, 17 Jul 2023 08:50:45 -0700 Subject: [PATCH 2/4] Update with suggestions --- .../reference/react/useImperativeHandle.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index d5468da9f..c113e78af 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -38,11 +38,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### 引数 {/*parameters*/} -* `ref`: [`forwardRef` render 関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。 +* `ref`: [`forwardRef` レンダー関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。 * `createHandle`: 引数を受け取らず、公開したい ref ハンドルを返す関数です。ref ハンドルは任意の型が使えます。通常、公開したいメソッドを持つオブジェクトを返します。 -* **オプション** `dependencies`: `createHandle` のコード内でリファレンスされるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、およびコンポーネント内で直接宣言された変数と関数が含まれます。もし linter が [React 向けに設定](/learn/editor-setup#linting)されている場合、linter がすべてのリアクティブな値が依存関係として正しく指定されているかを確認します。依存関係のリストは、一定数の項目があり、[dep1, dep2, dep3]のようにインラインで記述される必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) の比較メソッドを使用して、各依存関係を以前の値と比較します。もし再レンダーが依存関係のいずれかに変更をもたらした場合、またはその引数を省略した場合、`createHandle` 関数が再実行され、新しく作成されたハンドルが ref に割り当てられます。 +* **省略可能** `dependencies`: `createHandle` コード内で参照されるすべてのリアクティブな値のリストです。リアクティブな値には、props、state、コンポーネント本体に直接宣言されたすべての変数および関数が含まれます。リンタが [React 用に設定されている場合](/learn/editor-setup#linting)、すべてのリアクティブな値が依存値として正しく指定されているか確認できます。依存値のリストは要素数が一定である必要があり、`[dep1, dep2, dep3]` のようにインラインで記述する必要があります。React は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を使った比較で、それぞれの依存値を以前の値と比較します。再レンダーにより依存値のいずれかが変更された場合、または引数自体を省略した場合、`createHandle` 関数は再実行され、新しく作成されたハンドルが ref に割り当てられます。 #### 返り値 {/*returns*/} @@ -50,11 +50,11 @@ const MyInput = forwardRef(function MyInput(props, ref) { --- -## 使用方 {/*usage*/} +## 使用法 {/*usage*/} ### 親コンポーネントにカスタム ref ハンドルを公開する {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) にオプトインする必要があります。 +デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります。 ```js {4} import { forwardRef } from 'react'; @@ -72,7 +72,7 @@ import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { - // ... あなたのメソッド ... + // ... your methods ... }; }, []); @@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { 上記のコードでは、`ref` が `` に受け渡しされなくなっていることに注意してください。 -例えば、`` DOM ノード全体を公開するのではなく、その 2 つのメソッド、`focus` と `scrollIntoView` を公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持します。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出したいメソッドのみを含むハンドルを公開します。 +例えば、`` DOM ノード全体を公開したくはないが、その 2 つのメソッド、`focus` と `scrollIntoView` は公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持しておきます。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出してほしいメソッドのみを含むハンドルを公開します。 ```js {7-14} import { forwardRef, useRef, useImperativeHandle } from 'react'; @@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは基礎となる `` DOM ノードへの完全なアクセス権は持ちません。 +これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは背後にある `` DOM ノードへの完全なアクセス権は持ちません。 @@ -118,7 +118,7 @@ export default function Form() { function handleClick() { ref.current.focus(); - // DOM ノードが公開されていないため、これでは機能しません。 + // This won't work because the DOM node isn't exposed: // ref.current.style.opacity = 0.5; } @@ -281,8 +281,8 @@ export default AddComment; -**ref の過度な使用に注意してください。**ref は、prop として表現できない、*命令形式*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。 +**ref の過度な使用に注意してください。**ref は、props として表現できない、*命令型*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。 -**何かを prop として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令形式のハンドルを公開するのではなく、``のように、`isOpen` を prop として受け取る方が良いでしょう。[エフェクト](/learn/synchronizing-with-effects)を使用することで、命令形式の動作をプロップとして公開することができます。 +**何かを props として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令型のハンドルを公開するのではなく、`` のように、`isOpen` を props として受け取る方が良いでしょう。命令型の動作を props として公開する際には[エフェクト](/learn/synchronizing-with-effects)が役立ちます。 From 80030279abc2659627e46ab6d6dfb07d9feb7136 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 18 Jul 2023 16:52:04 +0900 Subject: [PATCH 3/4] Fix markup errors --- src/content/reference/react/useImperativeHandle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index c113e78af..51f3fed6b 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -281,8 +281,8 @@ export default AddComment; -**ref の過度な使用に注意してください。**ref は、props として表現できない、*命令型*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。 +**ref の過度な使用に注意してください**。ref は、props として表現できない、*命令型*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。 -**何かを props として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令型のハンドルを公開するのではなく、`` のように、`isOpen` を props として受け取る方が良いでしょう。命令型の動作を props として公開する際には[エフェクト](/learn/synchronizing-with-effects)が役立ちます。 +**何かを props として表現できる場合は、ref を使用すべきではありません**。例えば、`Modal` コンポーネントから `{ open, close }` のような命令型のハンドルを公開するのではなく、`` のように、`isOpen` を props として受け取る方が良いでしょう。命令型の動作を props として公開する際には[エフェクト](/learn/synchronizing-with-effects)が役立ちます。 From f0f965983604e06840e40a66555d692414c57328 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 18 Jul 2023 16:55:46 +0900 Subject: [PATCH 4/4] Fix URL --- src/content/reference/react/useImperativeHandle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index 51f3fed6b..4cca1ce31 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -54,7 +54,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { ### 親コンポーネントにカスタム ref ハンドルを公開する {/*exposing-a-custom-ref-handle-to-the-parent-component*/} -デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります。 +デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `` DOM ノードに[アクセスできるように](/learn/manipulating-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります。 ```js {4} import { forwardRef } from 'react';