From 82326ce43a12db5afe7fb9c6bfecb9af5be59173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Fri, 29 Dec 2023 23:05:47 +0300 Subject: [PATCH 1/4] forwardRef.md --- src/content/reference/react/forwardRef.md | 118 +++++++++++----------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index e1e96a20..80a28b50 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) @@ -20,7 +20,7 @@ const SomeComponent = forwardRef(render) ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +Выклічце `forwardRef()` каб ваш кампанент змог атрымаць рэф і перадаць яго даччынаму: ```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 выклікае дадзеную функцыю, перадаючы пропсы і `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` вяртае кампанент React, які можа быць адрэндэраны праз JSX. У адрозненні ад кампанентаў, вызначаных з дапамогай звычайных функцый, кампанент, вызначаны праз `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. +* У Строгім рэжыме, React будзе **выклікаць функцыю рэндэрынгу двойчы** каб [дапамагчы знайсці выпадковыя нячыстасці](#my-initializer-or-updater-function-runs-twice). Такія паводзіны адбываюцца толькі ў працоўным асяроддзі і ніяк не ўплываюць на працоўнае. Калі функцыя вашага кампанента чыстая (якой яна мае быць), гэта не мае ўплываць на логіку кампанента. Вынік аднаго з выклікаў будзе праігнараваны. --- -### `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`: Пропсы, перададзеныя з бацькоўскага кампанента. -* `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` можа быць аб’ектам ці функцыяй. Калі бацькоўскі кампанент не перадаў рэф, значэннем будзе `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` вяртае кампанент React, які можа быць адрэндэраны праз JSX. У адрозненні ад кампанентаў, вызначаных з дапамогай звычайных функцый, кампанент, вызначаны праз `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 кожнага з кампанентаў прыватныя. Але ж, часам бывае карысна адкрыць вузел для бацькоўскага кампанента. Напрыклад, каб дазволіць сфакусавацца на ім. Каб гэта зрабіць, абгарніце вызначэнне вашага кампанента ў `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: +Вы атрымаеце 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` атрымаць доступ да вузла DOM `` раскрытага ў `MyInput`: ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -122,7 +122,7 @@ function Form() { return (
- + @@ -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` [задае рэф](/reference/react/useRef#manipulating-the-dom-with-a-ref) для `MyInput`. Кампанент `MyInput` *перанакіроўвае* гэты рэф да тэга ``. У выніку кампанент `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 унутры кампанента ўскладняе змену ўнутраных часцей кампанента пазней. Звычайна вам можа спатрэбіцца раскрыццё вузлоў 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` вызначае рэф і перадае яго ў кампанент `MyInput`. Кампанент `MyInput` перанакіроўвае гэты рэф да элемента ``. Гэта дазваляе кампаненту `Form` зрабіць факусаванне на ``. @@ -156,9 +156,9 @@ export default function Form() { return ( - + ); @@ -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 `