Skip to content

Commit 26d5982

Browse files
committed
Update with suggestions
1 parent a12e4d0 commit 26d5982

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/content/reference/react/useImperativeHandle.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
3838
3939
#### 引数 {/*parameters*/}
4040
41-
* `ref`: [`forwardRef` render 関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。
41+
* `ref`: [`forwardRef` レンダー関数](/reference/react/forwardRef#render-function)から 2 番目の引数として受け取った `ref` です。
4242
4343
* `createHandle`: 引数を受け取らず、公開したい ref ハンドルを返す関数です。ref ハンドルは任意の型が使えます。通常、公開したいメソッドを持つオブジェクトを返します。
4444
@@ -50,11 +50,11 @@ const MyInput = forwardRef(function MyInput(props, ref) {
5050
5151
---
5252
53-
## 使用方 {/*usage*/}
53+
## 使用法 {/*usage*/}
5454
5555
### 親コンポーネントにカスタム ref ハンドルを公開する {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
5656
57-
デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) にオプトインする必要があります
57+
デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulation-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります
5858
5959
```js {4}
6060
import { forwardRef } from 'react';
@@ -72,7 +72,7 @@ import { forwardRef, useImperativeHandle } from 'react';
7272
const MyInput = forwardRef(function MyInput(props, ref) {
7373
useImperativeHandle(ref, () => {
7474
return {
75-
// ... あなたのメソッド ...
75+
// ... your methods ...
7676
};
7777
}, []);
7878

@@ -82,7 +82,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
8282
8383
上記のコードでは、`ref``<input>` に受け渡しされなくなっていることに注意してください。
8484
85-
例えば、`<input>` DOM ノード全体を公開するのではなく、その 2 つのメソッド、`focus``scrollIntoView` を公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持します。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出したいメソッドのみを含むハンドルを公開します
85+
例えば、`<input>` DOM ノード全体を公開したくはないが、その 2 つのメソッド、`focus``scrollIntoView` は公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持しておきます。そして、`useImperativeHandle` を使用して、親コンポーネントに呼び出してほしいメソッドのみを含むハンドルを公開します
8686
8787
```js {7-14}
8888
import { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -105,7 +105,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
105105
});
106106
```
107107
108-
これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは基礎となる `<input>` DOM ノードへの完全なアクセス権は持ちません。
108+
これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus` メソッドと `scrollIntoView` メソッドを呼び出すことができるようになります。ただし、親コンポーネントは背後にある `<input>` DOM ノードへの完全なアクセス権は持ちません。
109109
110110
<Sandpack>
111111
@@ -118,7 +118,7 @@ export default function Form() {
118118

119119
function handleClick() {
120120
ref.current.focus();
121-
// DOM ノードが公開されていないため、これでは機能しません。
121+
// This won't work because the DOM node isn't exposed:
122122
// ref.current.style.opacity = 0.5;
123123
}
124124

@@ -281,8 +281,8 @@ export default AddComment;
281281
282282
<Pitfall>
283283
284-
**ref の過度な使用に注意してください。**ref は、prop として表現できない、*命令形式*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。
284+
**ref の過度な使用に注意してください。**ref は、props として表現できない、*命令型*の動作にのみ使用するべきです。例えば、ノードへのスクロール、ノードへのフォーカス、アニメーションのトリガ、テキストの選択などです。
285285
286-
**何かを prop として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令形式のハンドルを公開するのではなく`<Modal isOpen={isOpen} />`のように、`isOpen`prop として受け取る方が良いでしょう。[エフェクト](/learn/synchronizing-with-effects)を使用することで、命令形式の動作をプロップとして公開することができます
286+
**何かを props として表現できる場合は、ref を使用すべきではありません。**例えば、`Modal` コンポーネントから `{ open, close }` のような命令型のハンドルを公開するのではなく`<Modal isOpen={isOpen} />` のように、`isOpen`props として受け取る方が良いでしょう。命令型の動作を props として公開する際には[エフェクト](/learn/synchronizing-with-effects)が役立ちます
287287
288288
</Pitfall>

0 commit comments

Comments
 (0)