Skip to content

Commit 427e947

Browse files
translate-react-bot[bot]translate-react-bot[bot]
authored
docs: translate useImperativeHandle.md to Русский
1 parent 2958f53 commit 427e947

1 file changed

Lines changed: 6 additions & 259 deletions

File tree

‎src/content/reference/react/useImperativeHandle.md‎

Lines changed: 6 additions & 259 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useImperativeHandle
44

55
<Intro>
66

7-
`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs)
7+
`useImperativeHandle` — это React Hook, который позволяет вам настроить обработчик, предоставляемый как [ref.](/learn/manipulating-the-dom-with-refs)
88

99
```js
1010
useImperativeHandle(ref, createHandle, dependencies?)
@@ -16,277 +16,24 @@ useImperativeHandle(ref, createHandle, dependencies?)
1616
1717
---
1818
19-
## Reference {/*reference*/}
19+
## Справочник {/*reference*/}
2020
2121
### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/}
2222
23-
Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes:
23+
Вызовите `useImperativeHandle` на верхнем уровне вашего компонента, чтобы настроить обработчик ref, который он предоставляет:
2424
2525
```js
2626
import { useImperativeHandle } from 'react';
2727

2828
function MyInput({ ref }) {
2929
useImperativeHandle(ref, () => {
3030
return {
31-
// ... your methods ...
31+
// ... ваши методы ...
3232
};
3333
}, []);
3434
// ...
3535
```
3636
37-
[See more examples below.](#usage)
37+
[См. больше примеров ниже.](#usage)
3838
39-
#### Parameters {/*parameters*/}
40-
41-
* `ref`: The `ref` you received as a prop to the `MyInput` component.
42-
43-
* `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.
44-
45-
* **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.
46-
47-
<Note>
48-
49-
Starting with React 19, [`ref` is available as a prop.](/blog/2024/12/05/react-19#ref-as-a-prop) In React 18 and earlier, it was necessary to get the `ref` from [`forwardRef`.](/reference/react/forwardRef)
50-
51-
</Note>
52-
53-
#### Returns {/*returns*/}
54-
55-
`useImperativeHandle` returns `undefined`.
56-
57-
---
58-
59-
## Usage {/*usage*/}
60-
61-
### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
62-
63-
To expose a DOM node to the parent element, pass in the `ref` prop to the node.
64-
65-
```js {2}
66-
function MyInput({ ref }) {
67-
return <input ref={ref} />;
68-
};
69-
```
70-
71-
With the code above, [a ref to `MyInput` will receive the `<input>` DOM node.](/learn/manipulating-the-dom-with-refs) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component:
72-
73-
```js {4-8}
74-
import { useImperativeHandle } from 'react';
75-
76-
function MyInput({ ref }) {
77-
useImperativeHandle(ref, () => {
78-
return {
79-
// ... your methods ...
80-
};
81-
}, []);
82-
83-
return <input />;
84-
};
85-
```
86-
87-
Note that in the code above, the `ref` is no longer passed to the `<input>`.
88-
89-
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:
90-
91-
```js {7-14}
92-
import { useRef, useImperativeHandle } from 'react';
93-
94-
function MyInput({ ref }) {
95-
const inputRef = useRef(null);
96-
97-
useImperativeHandle(ref, () => {
98-
return {
99-
focus() {
100-
inputRef.current.focus();
101-
},
102-
scrollIntoView() {
103-
inputRef.current.scrollIntoView();
104-
},
105-
};
106-
}, []);
107-
108-
return <input ref={inputRef} />;
109-
};
110-
```
111-
112-
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.
113-
114-
<Sandpack>
115-
116-
```js
117-
import { useRef } from 'react';
118-
import MyInput from './MyInput.js';
119-
120-
export default function Form() {
121-
const ref = useRef(null);
122-
123-
function handleClick() {
124-
ref.current.focus();
125-
// This won't work because the DOM node isn't exposed:
126-
// ref.current.style.opacity = 0.5;
127-
}
128-
129-
return (
130-
<form>
131-
<MyInput placeholder="Enter your name" ref={ref} />
132-
<button type="button" onClick={handleClick}>
133-
Edit
134-
</button>
135-
</form>
136-
);
137-
}
138-
```
139-
140-
```js src/MyInput.js
141-
import { useRef, useImperativeHandle } from 'react';
142-
143-
function MyInput({ ref, ...props }) {
144-
const inputRef = useRef(null);
145-
146-
useImperativeHandle(ref, () => {
147-
return {
148-
focus() {
149-
inputRef.current.focus();
150-
},
151-
scrollIntoView() {
152-
inputRef.current.scrollIntoView();
153-
},
154-
};
155-
}, []);
156-
157-
return <input {...props} ref={inputRef} />;
158-
};
159-
160-
export default MyInput;
161-
```
162-
163-
```css
164-
input {
165-
margin: 5px;
166-
}
167-
```
168-
169-
</Sandpack>
170-
171-
---
172-
173-
### Exposing your own imperative methods {/*exposing-your-own-imperative-methods*/}
174-
175-
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:
176-
177-
<Sandpack>
178-
179-
```js
180-
import { useRef } from 'react';
181-
import Post from './Post.js';
182-
183-
export default function Page() {
184-
const postRef = useRef(null);
185-
186-
function handleClick() {
187-
postRef.current.scrollAndFocusAddComment();
188-
}
189-
190-
return (
191-
<>
192-
<button onClick={handleClick}>
193-
Write a comment
194-
</button>
195-
<Post ref={postRef} />
196-
</>
197-
);
198-
}
199-
```
200-
201-
```js src/Post.js
202-
import { useRef, useImperativeHandle } from 'react';
203-
import CommentList from './CommentList.js';
204-
import AddComment from './AddComment.js';
205-
206-
function Post({ ref }) {
207-
const commentsRef = useRef(null);
208-
const addCommentRef = useRef(null);
209-
210-
useImperativeHandle(ref, () => {
211-
return {
212-
scrollAndFocusAddComment() {
213-
commentsRef.current.scrollToBottom();
214-
addCommentRef.current.focus();
215-
}
216-
};
217-
}, []);
218-
219-
return (
220-
<>
221-
<article>
222-
<p>Welcome to my blog!</p>
223-
</article>
224-
<CommentList ref={commentsRef} />
225-
<AddComment ref={addCommentRef} />
226-
</>
227-
);
228-
};
229-
230-
export default Post;
231-
```
232-
233-
234-
```js src/CommentList.js
235-
import { useRef, useImperativeHandle } from 'react';
236-
237-
function CommentList({ ref }) {
238-
const divRef = useRef(null);
239-
240-
useImperativeHandle(ref, () => {
241-
return {
242-
scrollToBottom() {
243-
const node = divRef.current;
244-
node.scrollTop = node.scrollHeight;
245-
}
246-
};
247-
}, []);
248-
249-
let comments = [];
250-
for (let i = 0; i < 50; i++) {
251-
comments.push(<p key={i}>Comment #{i}</p>);
252-
}
253-
254-
return (
255-
<div className="CommentList" ref={divRef}>
256-
{comments}
257-
</div>
258-
);
259-
}
260-
261-
export default CommentList;
262-
```
263-
264-
```js src/AddComment.js
265-
import { useRef, useImperativeHandle } from 'react';
266-
267-
function AddComment({ ref }) {
268-
return <input placeholder="Add comment..." ref={ref} />;
269-
}
270-
271-
export default AddComment;
272-
```
273-
274-
```css
275-
.CommentList {
276-
height: 100px;
277-
overflow: scroll;
278-
border: 1px solid black;
279-
margin-top: 20px;
280-
margin-bottom: 20px;
281-
}
282-
```
283-
284-
</Sandpack>
285-
286-
<Pitfall>
287-
288-
**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.
289-
290-
**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.
291-
292-
</Pitfall>
39+
#### Параметры {/*

0 commit comments

Comments
 (0)