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
* `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.
* **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.
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 `<input>` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef)
57
+
デフォルトでは、コンポーネントはその DOM ノードを親コンポーネントに公開しません。例えば、`MyInput` の親コンポーネントが `<input>` DOM ノードに[アクセスできるように](/learn/manipulating-the-dom-with-refs)したい場合は、[`forwardRef`](/reference/react/forwardRef) を使って明示的に許可する必要があります。
With the code above, [a ref to `MyInput`will receive the`<input>` 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:
67
+
上記のコードでは、[`MyInput`の ref は`<input>` DOM ノードを受け取ります。](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component)ただし、代わりにカスタムな値を公開することもできます。公開されるハンドルをカスタマイズするには、コンポーネントのトップレベルで `useImperativeHandle`を呼び出します。
For example, suppose you don't want to expose the entire `<input>` 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:
85
+
例えば、`<input>` DOM ノード全体を公開したくはないが、その 2 つのメソッド、`focus`と`scrollIntoView` は公開したいとします。これを行うには、実際のブラウザの DOM を別の ref に保持しておきます。そして、`useImperativeHandle`を使用して、親コンポーネントに呼び出してほしいメソッドのみを含むハンドルを公開します。
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 `<input>` DOM node.
108
+
これで、親コンポーネントが `MyInput` への ref を取得し、そのコンポーネントで `focus`メソッドと`scrollIntoView`メソッドを呼び出すことができるようになります。ただし、親コンポーネントは背後にある `<input>` DOM ノードへの完全なアクセス権は持ちません。
109
109
110
110
<Sandpack>
111
111
@@ -166,9 +166,9 @@ input {
166
166
167
167
---
168
168
169
-
### 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:
**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.
0 commit comments