From 578fb7d669f799ab721d5e2a61666380f73f4295 Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Sat, 9 Mar 2019 23:29:31 +0400 Subject: [PATCH 01/12] Translated fowarding refs without comments --- content/docs/forwarding-refs.md | 64 ++++++++++++++++----------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..3c8992132 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,76 +1,76 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Ref-lərin Yönləndirilməsi permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +Ref-in yönləndirilməsi avtomatik [ref](/docs/refs-and-the-dom.html) komponentin içindən onun bir uşağına ötürülməsi texnikasıdır. Bu çox vaxt applikasiyadakı komponentlər üçün vacib deyil. Lakin, bu bəzi növ komponentlər üçün faydalı ola bilər, xüsusilə yenidən istifadə olunan komponent kitabxanalarında. Çox vaxt rast gələn ssenarilər aşağıda qeyd olunub. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## DOM komponentlərə ref-lərin yönləndirilməsi {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: +Təbii `button` DOM elementini render edən `FancyButton` komponentini nəzərə alın: `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +React komponentlərin tətbiq detallarını, əlavə olaraq onların render edilmiş nəticəsini gizlədir. Digər komponentlər `FancyButton` istifadə etməklə daxili `button` DOM elementi üçün [ref-i əldə etmək üçün](/docs/refs-and-the-dom.html) **adətən lazım deyil**. Bu yaxşıdır, çünki bu elementlərin bir-birinin DOM strukturlarından çox arxayın olmağı qarşısını alır. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Buna baxmayaraq, belə inkapsulyasiyası `FeedStory` və ya `Comment` kimi applikasiya-səviyyəli komponentlər üçün arzuolunandır, bu `FancyButton` və ya `MyTextInput`kimi yüksək dərəcəli yenidən istifadə edilə bilən "leaf" komponentlər üçün əlverişsiz ola bilər. Bu komponentlər applikasi boyunca bənzər bir şəkildə müntəzən DOM button` və `input` kimi istifadə edilməyə meyillidir və onların DOM node-larına fokus, seçmə və ya animasiyalar üçün girişi qaçılmazdır. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**Ref-in yönləndirilməsi opt-in xüsusiyyətdir ki, bəzi komponentlərin qəbul etdikləri `ref`-i görürüb və daha aşağı (başqa sözlə "yönləndirir") uşağa ötürməyə icazə verir.** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +Aşağıdakı nümunədə `FancyButton` ona ötürülmüş `ref`-i əldə etmək üçün `React.forwardRef` istifadə edir və sonra onu render edən DOM `button` yönləndirir: `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +Bu yolla `FancyButton` istifadə edən komponentlər `button` DOM node-a ref-i əldə edə bilərlər və əgər ehhtiyac varsa daxil ola bilərlər-birdəfəlik DOM `button` istifadə edilən haldakı kimi. -Here is a step-by-step explanation of what happens in the above example: +Yuxarıdakı misalın addım-addım izahatına burada baxa bilərsiniz: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to ` )); -// You can now get a ref directly to the DOM button: +// İndi siz ref-i birdəfəlik DOM button ötürə bilərsiniz: const ref = React.createRef(); Click me!; From 9c772c78ca1b45f237190ccb24370d9f84bcb9bf Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Mon, 11 Mar 2019 14:08:12 +0400 Subject: [PATCH 05/12] fancy button exaple translation --- examples/forwarding-refs/fancy-button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..7fc8a60b7 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// FancyButton-u eksport etməkdənsə, biz LogProps eksport edirik. +// Buna baxmayaraq, bu FancyButton-u render edəcək. // highlight-next-line export default logProps(FancyButton); From 32b34195ba7968d3025b0255c81d2d6f0bda35b9 Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Mon, 11 Mar 2019 14:29:30 +0400 Subject: [PATCH 06/12] log props after example translation --- examples/forwarding-refs/log-props-after.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..d2af99051 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -9,15 +9,15 @@ function logProps(Component) { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // Xüsusi prop "forwardedRef"-ı ref kimi təyin edin // highlight-next-line return ; } } // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // Biz bunu LogProps-a müntəzəm prop kimi ötürə bilərik, məs. "forwardedRef" + // Və sonra bu Komponent kimi qoşula bilər. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ; From 40b563272ae33855cebca9b463b8e360ed5b4e8b Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Sat, 30 Mar 2019 18:40:31 +0400 Subject: [PATCH 07/12] fix small issues --- content/docs/forwarding-refs.md | 48 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3c8992132..2a0f228d2 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,73 +4,73 @@ title: Ref-lərin Yönləndirilməsi permalink: docs/forwarding-refs.html --- -Ref-in yönləndirilməsi avtomatik [ref](/docs/refs-and-the-dom.html) komponentin içindən onun bir uşağına ötürülməsi texnikasıdır. Bu çox vaxt applikasiyadakı komponentlər üçün vacib deyil. Lakin, bu bəzi növ komponentlər üçün faydalı ola bilər, xüsusilə yenidən istifadə olunan komponent kitabxanalarında. Çox vaxt rast gələn ssenarilər aşağıda qeyd olunub. +Ref-in yönləndirilməsi - avtomatik [ref](/docs/refs-and-the-dom.html) komponentinin içindən onun bir uşağına ötürülməsi texnikasıdır. Bu texnika çox vaxt applikasiyadakı komponentlər üçün vacib deyil. Lakin, bəzi növ komponentlər üçün, xüsusilə yenidən istifadə olunan komponent kitabxanalarında, faydalı ola bilər. Çox vaxt rast gəlinən ssenarilər aşağıda qeyd olunub. -## DOM komponentlərə ref-lərin yönləndirilməsi {#forwarding-refs-to-dom-components} +## DOM komponentlərinə ref-lərin yönləndirilməsi {#forwarding-refs-to-dom-components} -Təbii `button` DOM elementini render edən `FancyButton` komponentini nəzərə alın: +Nativ `button` DOM elementini render edən `FancyButton` komponentinə nəzər salın: `embed:forwarding-refs/fancy-button-simple.js` -React komponentlərin tətbiq detallarını, əlavə olaraq onların render edilmiş nəticəsini gizlədir. Digər komponentlər `FancyButton` istifadə etməklə daxili `button` DOM elementi üçün [ref-i əldə etmək üçün](/docs/refs-and-the-dom.html) **adətən lazım deyil**. Bu yaxşıdır, çünki bu elementlərin bir-birinin DOM strukturlarından çox arxayın olmağı qarşısını alır. +React komponentləri tətbiq detallarını, eləcə də onların render edilmiş nəticələrini gizlədir. Adətən `FancyButton` istifadə edən digər komponenlər `FancyButton` -un daxili `button` DOM elementində olan [ref-i əldə etmək üçün](/docs/refs-and-the-dom.html) **lazım deyil**. Bu yaxşıdır, çünki bu elementlərin bir-birinin DOM strukturlarından çox arxayın olmağının qarşısını alır. -Buna baxmayaraq, belə inkapsulyasiyası `FeedStory` və ya `Comment` kimi applikasiya-səviyyəli komponentlər üçün arzuolunandır, bu `FancyButton` və ya `MyTextInput`kimi yüksək dərəcəli yenidən istifadə edilə bilən "leaf" komponentlər üçün əlverişsiz ola bilər. Bu komponentlər applikasi boyunca bənzər bir şəkildə müntəzən DOM button` və `input` kimi istifadə edilməyə meyillidir və onların DOM node-larına fokus, seçmə və ya animasiyalar üçün girişi qaçılmazdır. +Buna baxmayaraq, belə inkapsulyasiyalar `FeedStory` və ya `Comment` kimi applikasiya-səviyyəli komponentlər üçün arzu olunandır. Bu `FancyButton` və ya `MyTextInput`kimi yüksək dərəcəli yenidən istifadə edilə bilən "leaf" komponentləri üçün əlverişsiz ola bilər. Bu komponentlər applikasiya boyunca bənzər bir şəkildə müntəzən DOM `button` və `input` kimi istifadə edilməyə meyillidir və onların DOM node-larına fokus, seçmə və ya animasiyalar üçün girişi qaçılmazdır. -**Ref-in yönləndirilməsi opt-in xüsusiyyətdir ki, bəzi komponentlərin qəbul etdikləri `ref`-i görürüb və daha aşağı (başqa sözlə "yönləndirir") uşağa ötürməyə icazə verir.** +**Bəzi komponentlərin qəbul etdikləri `ref`-i götürüb və daha aşağı uşağa ötürməyə (başqa sözlə "yönləndirir") icazə verməsi Ref-in yönləndirilməsi opt-in xüsusiyyətdir.** -Aşağıdakı nümunədə `FancyButton` ona ötürülmüş `ref`-i əldə etmək üçün `React.forwardRef` istifadə edir və sonra onu render edən DOM `button` yönləndirir: +Aşağıdakı nümunədə `FancyButton`, ona ötürülmüş `ref`-i əldə etmək üçün `React.forwardRef` istifadə edir və sonra onu render edən DOM `button`-a yönləndirir: `embed:forwarding-refs/fancy-button-simple-ref.js` -Bu yolla `FancyButton` istifadə edən komponentlər `button` DOM node-a ref-i əldə edə bilərlər və əgər ehhtiyac varsa daxil ola bilərlər-birdəfəlik DOM `button` istifadə edilən haldakı kimi. +Bu yolla `FancyButton` istifadə edən komponentlər, `FancyButton`-da yerləşən `button` DOM nodunun ref-ini əldə edə bilər və bu `ref` ilə DOM `button`-dan birbaşa istifadə etdiyimiz kimi, `FancyButton`-dakı `button` DOM nodundan istifadə edə bilərik. Yuxarıdakı misalın addım-addım izahatına burada baxa bilərsiniz: -1. Biz `React.createRef` çağıraraq [React ref](/docs/refs-and-the-dom.html) yaradırıq və onu `ref` dəyişənə təyin edirik. +1. Biz `React.createRef` çağıraraq [React ref](/docs/refs-and-the-dom.html) yaradırıq və onu `ref` dəyişəninə təyin edirik. 2. Biz `ref`-imizi `` ötürərək, onu JSX atributu kimi təyin edirik. -3. React `ref`-i `(props, ref) => ...` funksiyasına ikinci arqument kimi `forwardRef` içində ötürür. -4. Biz bu `ref` arqumentini ` )); -// İndi siz ref-i birdəfəlik DOM button ötürə bilərsiniz: +// İndi siz ref-i birdəfəlik DOM button-a ötürə bilərsiniz: const ref = React.createRef(); Click me!; From 849597ef7b0862256e486b0cf2b69cab74ef0bf3 Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Sat, 30 Mar 2019 18:49:47 +0400 Subject: [PATCH 09/12] fix fancy button --- examples/forwarding-refs/fancy-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 7fc8a60b7..d9154bb01 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// FancyButton-u eksport etməkdənsə, biz LogProps eksport edirik. +// FancyButton-u eksport etməkdənsə, biz LogProps-u eksport edirik. // Buna baxmayaraq, bu FancyButton-u render edəcək. // highlight-next-line export default logProps(FancyButton); From 734639f38a71dd4cb1d193f79b130c94f05e708e Mon Sep 17 00:00:00 2001 From: Aziza Ismayilova Date: Sat, 30 Mar 2019 18:52:19 +0400 Subject: [PATCH 10/12] fix fancy button ref --- examples/forwarding-refs/fancy-button-ref.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js index c69d0a021..b0cf8f3a7 100644 --- a/examples/forwarding-refs/fancy-button-ref.js +++ b/examples/forwarding-refs/fancy-button-ref.js @@ -5,7 +5,7 @@ const ref = React.createRef(); // Bizim import etmidiyimiz FancyButton komponenti LogProps HOC-dur. // Hətta renden edilmiş nəticə də eyni olacaq, -// Bizin ref daxili FancyButton komponentin yerinə LogProps işarə edəcək! +// Bizim ref-imiz daxili FancyButton komponentinin yerinə LogProps-a işarə edəcək! // Bu deməkdir ki, biz məsələn ref.current.focus() çağıra bilmərik // highlight-range{4} Date: Sat, 30 Mar 2019 19:00:54 +0400 Subject: [PATCH 11/12] fix log props after --- examples/forwarding-refs/log-props-after.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index d2af99051..3bc6b1b80 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -15,7 +15,7 @@ function logProps(Component) { } } - // Note the second param "ref" provided by React.forwardRef. + // Nəzər alın ki, ikinci "ref" parametri React.forwardRef. tərəfindən təqdim olunub. // Biz bunu LogProps-a müntəzəm prop kimi ötürə bilərik, məs. "forwardedRef" // Və sonra bu Komponent kimi qoşula bilər. // highlight-range{1-3} From 33e8a0fc1c3bc5771a7d589fa1e05783e1f2bc3a Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Mon, 8 Apr 2019 15:03:40 +0400 Subject: [PATCH 12/12] Fix minor translation quirks --- content/docs/forwarding-refs.md | 30 ++++++++++---------- examples/forwarding-refs/log-props-after.js | 4 +-- examples/forwarding-refs/log-props-before.js | 4 +-- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 2a0f228d2..2978e073a 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -11,11 +11,11 @@ Ref-in yönləndirilməsi - avtomatik [ref](/docs/refs-and-the-dom.html) kompone Nativ `button` DOM elementini render edən `FancyButton` komponentinə nəzər salın: `embed:forwarding-refs/fancy-button-simple.js` -React komponentləri tətbiq detallarını, eləcə də onların render edilmiş nəticələrini gizlədir. Adətən `FancyButton` istifadə edən digər komponenlər `FancyButton` -un daxili `button` DOM elementində olan [ref-i əldə etmək üçün](/docs/refs-and-the-dom.html) **lazım deyil**. Bu yaxşıdır, çünki bu elementlərin bir-birinin DOM strukturlarından çox arxayın olmağının qarşısını alır. +React komponentləri tətbiq detallarını, eləcə də onların render edilmiş nəticələrini gizlədir. Adətən `FancyButton` istifadə edən digər komponenlər `FancyButton`-ın daxili `button` DOM elementində olan [ref-i əldə etmək üçün](/docs/refs-and-the-dom.html) **lazım deyil**. Bu yaxşıdır, çünki bu elementlərin bir-birinin DOM strukturlarından çox arxayın olmağının qarşısını alır. -Buna baxmayaraq, belə inkapsulyasiyalar `FeedStory` və ya `Comment` kimi applikasiya-səviyyəli komponentlər üçün arzu olunandır. Bu `FancyButton` və ya `MyTextInput`kimi yüksək dərəcəli yenidən istifadə edilə bilən "leaf" komponentləri üçün əlverişsiz ola bilər. Bu komponentlər applikasiya boyunca bənzər bir şəkildə müntəzən DOM `button` və `input` kimi istifadə edilməyə meyillidir və onların DOM node-larına fokus, seçmə və ya animasiyalar üçün girişi qaçılmazdır. +Buna baxmayaraq, belə inkapsulyasiyalar `FeedStory` və ya `Comment` kimi applikasiya-səviyyəli komponentlər üçün arzu olunandır. Bu `FancyButton` və ya `MyTextInput` kimi yüksək dərəcəli yenidən istifadə edilə bilən "leaf" komponentləri üçün əlverişsiz ola bilər. Bu komponentlər applikasiya boyunca bənzər bir şəkildə müntəzən DOM `button` və `input` kimi istifadə edilməyə meyillidir və onların DOM nodlarına fokus, seçmə və ya animasiyalar üçün girişi qaçılmazdır. -**Bəzi komponentlərin qəbul etdikləri `ref`-i götürüb və daha aşağı uşağa ötürməyə (başqa sözlə "yönləndirir") icazə verməsi Ref-in yönləndirilməsi opt-in xüsusiyyətdir.** +**Ref-in yönləndirilməsi, komponentlərin qəbul etdikləri `ref`-i daha aşağı uşağa göndərməsi (başqa sözlə "yönləndirməsi") xüsusiyyətidir.** Aşağıdakı nümunədə `FancyButton`, ona ötürülmüş `ref`-i əldə etmək üçün `React.forwardRef` istifadə edir və sonra onu render edən DOM `button`-a yönləndirir: @@ -23,13 +23,13 @@ Aşağıdakı nümunədə `FancyButton`, ona ötürülmüş `ref`-i əldə etmə Bu yolla `FancyButton` istifadə edən komponentlər, `FancyButton`-da yerləşən `button` DOM nodunun ref-ini əldə edə bilər və bu `ref` ilə DOM `button`-dan birbaşa istifadə etdiyimiz kimi, `FancyButton`-dakı `button` DOM nodundan istifadə edə bilərik. -Yuxarıdakı misalın addım-addım izahatına burada baxa bilərsiniz: +Yuxarıdakı misalın addım-addım izahatına aşağıda baxa bilərsiniz: 1. Biz `React.createRef` çağıraraq [React ref](/docs/refs-and-the-dom.html) yaradırıq və onu `ref` dəyişəninə təyin edirik. -2. Biz `ref`-imizi `` ötürərək, onu JSX atributu kimi təyin edirik. -3. React `ref`-i `(props, ref) => ...` funksiyasına ikinci arqument kimi `forwardRef` içindən ötürür. -4. Biz bu `ref` arqumentini `