From fd4e1fa28dbc0f0b4b5729852cb0dbd4238e9567 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Mon, 18 Feb 2019 16:56:01 +0400 Subject: [PATCH 01/12] Translate context introduction and "when to use" --- content/docs/context.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 8e41a465f..d5cbb32db 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -1,38 +1,38 @@ --- id: context -title: Context +title: Kontekst permalink: docs/context.html --- -Context provides a way to pass data through the component tree without having to pass props down manually at every level. +Kontext məlumatları komponent ağacının hər səviyyəsində proplar göndərmədən məlumatları komponentlərə ötürməyə təmin edir. -In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. +Standart React applikasiyasında, məlumat yuxarıdan aşağı (valideyndən uşağa) proplar vasitəsi ilə göndərilir. Lakin bir çox komponentin istifadə etdiyi bəzi prop tiplərinin (məsələn dil seçimi, UI şablonun) bu prop tiplərinin göndərilməsi çox yorucu və çətin ola bilər. Kontext, dəyərlərin bir komponentlər arasında, komponent ağaçının hər səviyyəsində prop göndərmədən paylaşmasını təminat edir. -- [When to Use Context](#when-to-use-context) -- [Before You Use Context](#before-you-use-context) +- [Nə Zaman Kontekst İşlətmək Lazımdır](#when-to-use-context) +- [Kontekst İşlətməkdən Əvvəl](#before-you-use-context) - [API](#api) - [React.createContext](#reactcreatecontext) - [Context.Provider](#contextprovider) - [Class.contextType](#classcontexttype) - [Context.Consumer](#contextconsumer) -- [Examples](#examples) - - [Dynamic Context](#dynamic-context) - - [Updating Context from a Nested Component](#updating-context-from-a-nested-component) - - [Consuming Multiple Contexts](#consuming-multiple-contexts) -- [Caveats](#caveats) -- [Legacy API](#legacy-api) +- [Misallar](#examples) + - [Dinamik Kontekst](#dynamic-context) + - [Konteksti Bir Birindən Keçən Komponentdən Yeniləmək](#updating-context-from-a-nested-component) + - [Bir Neçə Kontekstin İstehlakı](#consuming-multiple-contexts) +- [Xəbərdarlıqlar](#caveats) +- [Köhnə API](#legacy-api) -## When to Use Context {#when-to-use-context} +## Nə Zaman Kontekst İşlətmək Lazımdır {#when-to-use-context} -Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a "theme" prop in order to style the Button component: +Kontekst "qlobal" qəbul olunan məlumatları (məsələn avtorizasiya olunmush istifadəçi, şablon, və ya seçilmiş dil) React komponentlər ağacında paylaşmaq üçün nəzərdə tutulmuşdur. Məsələn, aşağıdakı kodda biz Button komponentini dəyişmək üçün "theme" propunu bütün komponentlərdən bir bir göndəririk: `embed:context/motivation-problem.js` -Using context, we can avoid passing props through intermediate elements: +Kontekst işlətdikdə isə, biz propları ara elementlərdən göndərməyə bilərik: `embed:context/motivation-solution.js` -## Before You Use Context {#before-you-use-context} +## Kontekst İşlətməkdən Əvvəl {#before-you-use-context} Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. From c76b3298bfbca5827b249b40c61c93192b271056 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Tue, 19 Feb 2019 16:58:42 +0400 Subject: [PATCH 02/12] Translae Context page "Before you use Context" section --- content/docs/context.md | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index d5cbb32db..f4de7c7fc 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -34,27 +34,27 @@ Kontekst işlətdikdə isə, biz propları ara elementlərdən göndərməyə bi ## Kontekst İşlətməkdən Əvvəl {#before-you-use-context} -Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. +Kontekst əsasən məlumatın fərqli səviyyələrdə yerləşən *bir neçə* komponent tərəfindən işlənməsi üçündür. Bunu hər yerdə işlətməyin çünki komponentin yenidən istifadəsini çətinləşdirir. -**If you only want to avoid passing some props through many levels, [component composition](/docs/composition-vs-inheritance.html) is often a simpler solution than context.** +**Əgər siz propları bir neçə səviyyədə göndərmək istəmirsinizsə, [komponent kompozisiyası](/docs/composition-vs-inheritance.html) kontekstdən daha sadə həlldir.** -For example, consider a `Page` component that passes a `user` and `avatarSize` prop several levels down so that deeply nested `Link` and `Avatar` components can read it: +Misal üçün, gəlin `user` və `avatarSize` proplarını mövcud olan `Page` komponentindan bir neçə səviyyədə göndərərkki, dərində olan `Link` və `Avatar` komponentləri bu propları oxuya bilsinlər: ```js -// ... which renders ... +// ... render edirs ... -// ... which renders ... +// ... render edir ... -// ... which renders ... +// ... render edir ... ``` -It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too. +Əgər `user` və `avatarSize` propları yalnız `Avatar` komponenti tərəfindən işlənəcəksə, bu propların bütün səviyyələrdə göndərilməsi lazımsızdır. Əgər `Avatar` komponentinə yeni proplar lazım olsa, siz yenə lazım olan propları bütün ara komponentlərdən keçirməlisiniz. -One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` prop: +Bu problemi **kontekstsiz** həll etməyin yolu [`Avatar` komponentinin özünü göndərməkdir](/docs/composition-vs-inheritance.html#containment). Bu zaman, ara komponentlərin `user` və `avatarSize` proplarını bilməsi lazım deyil: ```js function Page(props) { @@ -67,21 +67,21 @@ function Page(props) { return ; } -// Now, we have: +// Biz bizdə aşağıdakı var -// ... which renders ... +// ... render edir ... -// ... which renders ... +// ... render edir ... -// ... which renders ... +// ... render edir ... {props.userLink} ``` -With this change, only the top-most Page component needs to know about the `Link` and `Avatar` components' use of `user` and `avatarSize`. +Bu dəyişiklik ilə, yalnız ən yuxarıda olan Page komponenti, `Link` və `Avatar` komponentlərinin `user` və `avatarSize` proplarını işlətməyini bilir. -This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want. +Bu *kontrolun inversiyası* applikasiyada göndərilən propların sayını azaldaraq və ana komponentlərə daha çox kontrol verərək, bir neçə ssenaridə kodunuzu daha təmiz edir. Lakin, bu metod hər ssenari üçün düzgün seçim deyil: mürəkkəbiliyi komponent ağacında yüksək olan komponentlərə göndərdikdə, bu yuxarı səviyyəli komponentləri daha çətinləşdirir və aşağı səviyyəli komponentlərin daha əyilgən olmasını məcbur edir. -You're not limited to a single child for a component. You may pass multiple children, or even have multiple separate "slots" for children, [as documented here](/docs/composition-vs-inheritance.html#containment): +Siz komponentdə bir uşaq göstərməyə məhdud deyilsiniz. Siz bir neçə uşağı, hətta uşaqlar üçün bir neçə "yuvada" edə bilərsiniz ([burada sənələşmişdir](/docs/composition-vs-inheritance.html#containment)): ```js function Page(props) { @@ -103,9 +103,10 @@ function Page(props) { } ``` -This pattern is sufficient for many cases when you need to decouple a child from its immediate parents. You can take it even further with [render props](/docs/render-props.html) if the child needs to communicate with the parent before rendering. +Bu metod, uşaqları yaxın valideyndən ayırmaq üçün kifayətdir. Əgər uşaq komponent, render etməzdən öncə valideyn ilə kommunikasiya qurmalıdırsa, siz [render proplardan](/docs/render-props.html) istifadə edə bilərsiniz. + +Lakin, bəzən eyni məlumatlar komponent ağacında fərqli səviyyələrdə bir neçə komponent tərəfindən işlədilə bilməlidirlər. Kontekst belə məlumatları və bu məlumatlarda olan dəyişiklikləri, bütün aşağısında olan komponentlərə "yayımlaya" bilir. Bir çox nümunələrdə kontekst işlətmək alternativlərdən daha sadə ola bilər (dilin seçimi, şablon, məlumat keşi). -However, sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you "broadcast" such data, and changes to it, to all components below. Common examples where using context might be simpler than the alternatives include managing the current locale, theme, or a data cache. ## API {#api} From 6499c2941d691050dbcc3a8b85c62d33f7ccc19d Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 15:50:35 +0400 Subject: [PATCH 03/12] Translate createContext API section --- content/docs/context.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index f4de7c7fc..d14f9dd90 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -116,14 +116,14 @@ Lakin, bəzən eyni məlumatlar komponent ağacında fərqli səviyyələrdə bi const MyContext = React.createContext(defaultValue); ``` -Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching `Provider` above it in the tree. +Kontekst obyekini yaradır. React Context obyektinə "abunə olan" komponentləri render edərkən, yuxarı səviyyədə ən yaxın olan `Provider`-dən cari kontext dəyərini oxuyacaq. -The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`. +`defaultValue` arqumenti **yalnız** komponentin yuxarı səviyyəsində Provider olmadığı zaman işlənir. Bu komponentləri Provider ilə əhatə etmədən, ayrılıqda test etmək üçün faydalıdır. Qeyd: Provider dəyərinə `undefined` göndərildikdə işlədən komponentlər `defaultValue`-dan istifadə etmirlər. ### `Context.Provider` {#contextprovider} ```js - + ``` Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. From 2fee89f22dd7a86e7fb3a03c538a800e5526c2f2 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 16:27:21 +0400 Subject: [PATCH 04/12] Translate Context Provider API --- content/docs/context.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index d14f9dd90..bd1555380 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -126,17 +126,17 @@ Kontekst obyekini yaradır. React Context obyektinə "abunə olan" komponentlər ``` -Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. +Hər bir Context obyekti Provider adlı React komponenti ilə gəlir. Bu komponent kontekstdə olan dəyişikliklərə abunə olmaq istəyən komponentlərə imkan yaradır. -Accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree. +Provayder `value` propu qəbul edir. Bu propun dəyəri abunə olan komponentlərə ötürülür. Bir Provider bir neçə Consumer komponentə goşula bilər. Provayderlər eyni komponent ağacında bir neçə səviyyədə ola bilər. Ağacda dərində yerləşən provayderlər, yuxarıda olan provayderlərin dəyərlərini əvəz edir. -All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component bails out of the update. +Provider-in aşağısında olan bütün istehlakçılar, Provider-in `value` propu dəyişdikdə yenidən render edir. Providerdən aşağıya məlumatların yayınlaması, `shouldComponentUpdate` funskiyasından asılı deyil. Bu deməkdirki, yuxarı komponentdə hansısa komponent yenilənməsə belə, Provider-ə abunə olan komponent yenilənəcək. -Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). +Dəyişikliklər yeni və köhnə dəyərlərin [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) alqoritminə bənzər bir alqoritm ilə müqayisəsi ilə təyin olunur. -> Note +> Qeyd > -> The way changes are determined can cause some issues when passing objects as `value`: see [Caveats](#caveats). +> Dəyişikliklər `value`-a obyeki göndərdikdə problem yarada bilərlər: [Dəyişikliklər](#caveats) bölməsinə baxın. ### `Class.contextType` {#classcontexttype} From 5007b21397dbd82f736cb02879c4afc6a17708f5 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 17:22:24 +0400 Subject: [PATCH 05/12] Translate contextType API --- content/docs/context.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index bd1555380..665ccc61d 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -144,7 +144,7 @@ Dəyişikliklər yeni və köhnə dəyərlərin [`Object.is`](//developer.mozill class MyClass extends React.Component { componentDidMount() { let value = this.context; - /* perform a side-effect at mount using the value of MyContext */ + /* mount etdikdə MyContext-in dəyəri ilə kənar effekt edin */ } componentDidUpdate() { let value = this.context; @@ -156,19 +156,19 @@ class MyClass extends React.Component { } render() { let value = this.context; - /* render something based on the value of MyContext */ + /* MyContext-in dəyəri ilə render edin */ } } MyClass.contextType = MyContext; ``` -The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). This lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function. +`contextType` klass parametrinə [`React.createContext()`](#reactcreatecontext) ilə yaranmış Context obyekti təyin edilə bilər. Bu sizə ən yaxında olan Context-in dəyərini `this.context`-dən oxumağa icazə verir. Siz bu dəyişəndə olan dəyəri render funskiyası daxil olmaqla bütün render funskiyalarından istifadə edə bilərsiniz. -> Note: +> Qeyd: > -> You can only subscribe to a single context using this API. If you need to read more than one see [Consuming Multiple Contexts](#consuming-multiple-contexts). +> Siz bu API ilə yalnız bir kontekstə abunə ola bilərsiniz. Əgər sizə birdən çox kontekst lazımdırsa [Bir Neçə Kontekstin İstehlakı](#consuming-multiple-contexts) bölməsindən oxuya bilərsiniz. > -> If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use a **static** class field to initialize your `contextType`. +> Əgər siz eksperimental olan [public klass sahəsi sintaksisindən](https://babeljs.io/docs/plugins/transform-class-properties/) istifadə edirsinizsə, siz **static** klass sahəsindən istifadə edib `contextType`-ı inisializasiya edə bilərsiniz. ```js @@ -176,7 +176,7 @@ class MyClass extends React.Component { static contextType = MyContext; render() { let value = this.context; - /* render something based on the value */ + /* dəyər əsasında render et */ } } ``` From 5bedc8bc8b2fdaf4d7571bb201be91d32b6e111e Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 17:30:21 +0400 Subject: [PATCH 06/12] Translate API --- content/docs/context.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 665ccc61d..52f04b0f4 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -185,19 +185,19 @@ class MyClass extends React.Component { ```js - {value => /* render something based on the context value */} + {value => /* kontekst dəyəri əsasında render et */} ``` -A React component that subscribes to context changes. This lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components). +Kontekst dəyişikliklərinə abunə olan React komponenti. Bu sizə [funskional komponent]((/docs/components-and-props.html#function-and-class-components)) ilə kontekstə abunə olmağa icazə verir. -Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The `value` argument passed to the function will be equal to the `value` prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the `value` argument will be equal to the `defaultValue` that was passed to `createContext()`. +[funskiyanın uşaq kimi olmasını](/docs/render-props.html#using-props-other-than-render) tələb edir. Bu funskiya kontekstin cari dəyərini qəbul edir və React nodu qaytarır. Funskiyaya göndərilən `value` arqumenti, komponent ağacında bu komponentə ən yaxın olan Provider-in `value` propu ilə eynidir. Əgər Provider yoxdursa, `value` arqumenti `createContext()`-ə keçirilən `defaultValue` propuna bərabər olacaq. -> Note +> Qeyd > -> For more information about the 'function as a child' pattern, see [render props](/docs/render-props.html). +> 'funskiyanın uşaq kimi olması' patterni haqqında daha ətraflı məlumat üçün, [render proplar](/docs/render-props.html) sənədəinə baxın. -## Examples {#examples} +## Misallar {#examples} ### Dynamic Context {#dynamic-context} From 1687889145edddf5c94ff3c2405044ce3159c4dc Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 17:37:44 +0400 Subject: [PATCH 07/12] Translate example texts --- content/docs/context.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 52f04b0f4..c33ba6f4a 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -199,9 +199,9 @@ Kontekst dəyişikliklərinə abunə olan React komponenti. Bu sizə [funskional ## Misallar {#examples} -### Dynamic Context {#dynamic-context} +### Dinamik Kontekst {#dynamic-context} -A more complex example with dynamic values for the theme: +Şablon üçün dinamik dəyərlər işlədən daha kompleks misal: **theme-context.js** `embed:context/theme-detailed-theme-context.js` @@ -212,9 +212,9 @@ A more complex example with dynamic values for the theme: **app.js** `embed:context/theme-detailed-app.js` -### Updating Context from a Nested Component {#updating-context-from-a-nested-component} +### Konteksti Bir Birindən Keçən Komponentdən Yeniləmək {#updating-context-from-a-nested-component} -It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the context: +Bir çox vaxtda konteksti komponent ağacının dərinliklərində olan bir komponentdən yeniləmək lazım olur. Bu halda, siz kontekstdən funksiyanı consumer-lərin yeniləməsi üçün funksiya göndərə bilərsiniz: **theme-context.js** `embed:context/updating-nested-context-context.js` @@ -225,12 +225,14 @@ It is often necessary to update the context from a component that is nested some **app.js** `embed:context/updating-nested-context-app.js` -### Consuming Multiple Contexts {#consuming-multiple-contexts} +### Bir Neçə Kontekstin İstehlakı {#consuming-multiple-contexts} -To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree. +Kontekstin yenidən render edilməsinin tez olması üçün, React hər kontekst consumerinin komponent ağacında yeni bir nod yaratmalıdır. `embed:context/multiple-contexts.js` +Əgər 2 və ya daha çox kontekst dəyəri tez tez birlikdə işlədilirsə, siz bu kontekstlərin dəyərlərini birlikdə təmin edən xüsusi bir render prop komponenti düzəldə bilərsiniz. + If two or more context values are often used together, you might want to consider creating your own render prop component that provides both. ## Caveats {#caveats} From 70bee3cb2c4d3cd5d1634a96a2cb213dccc6ad0a Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 17:47:29 +0400 Subject: [PATCH 08/12] Trabskate context caveats and legacy API --- content/docs/context.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index c33ba6f4a..0b5ca9d80 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -235,20 +235,19 @@ Kontekstin yenidən render edilməsinin tez olması üçün, React hər kontekst If two or more context values are often used together, you might want to consider creating your own render prop component that provides both. -## Caveats {#caveats} +## Xəbərdarlıq {#caveats} -Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider's parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for `value`: +Kontesktin yenidən render etmək üçün dəyərin referensi ilə edir deyə, provider yenidən render etdikdə, consumer-lərdə istənilməyən renderlər oluna bilər. Məsələn, aşağıdakı kodda `value` üçün hər zaman yeni obyekt yarandığından, bütün consumer-lər yenidən render edirlər: `embed:context/reference-caveats-problem.js` - -To get around this, lift the value into the parent's state: +Bu problemi həll etmək üçün, dəyəri valideynin state-inə qaldırın: `embed:context/reference-caveats-solution.js` -## Legacy API {#legacy-api} +## Köhnə API {#legacy-api} -> Note +> Qeyd > -> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. Read the [legacy context docs here](/docs/legacy-context.html). +> Əvvəl React eksperimental bir kontext API ilə gəlirdi. Bu köhnə API, React-in bütün 16.x buraxılışlarında dəstəklənəcək. Lakin applikasiyaların yeni API-a miqrasiya edilməyi tövsiyyə edilir. Köhnə API gələcəkdə buraxılan ƏSAS versiyalardan silinəcək. [köhnə kontekst haqqında buradan](/docs/legacy-context.html) oxuya bilərsiniz. From 061d2154bfeeeac1baa2a79af68dd2d961137e5e Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 20 Feb 2019 18:11:16 +0400 Subject: [PATCH 09/12] Translate example snippets for context --- examples/context/motivation-problem.js | 8 +++---- examples/context/motivation-solution.js | 22 +++++++++---------- examples/context/multiple-contexts.js | 8 +++---- examples/context/theme-detailed-app.js | 8 +++---- .../context/theme-detailed-theme-context.js | 2 +- .../context/updating-nested-context-app.js | 6 ++--- .../updating-nested-context-context.js | 4 ++-- ...ing-nested-context-theme-toggler-button.js | 4 ++-- 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/examples/context/motivation-problem.js b/examples/context/motivation-problem.js index d166f400a..22e105e9b 100644 --- a/examples/context/motivation-problem.js +++ b/examples/context/motivation-problem.js @@ -6,10 +6,10 @@ class App extends React.Component { function Toolbar(props) { // highlight-range{1-4,7} - // The Toolbar component must take an extra "theme" prop - // and pass it to the ThemedButton. This can become painful - // if every single button in the app needs to know the theme - // because it would have to be passed through all components. + // Toolbar komponenti əlavə "theme" propu qəbul etməli və + // bu propu ThemedButton komponentinə göndərməlidir. Applikasiyada hər bir + // düymənin şablondan xəbəri olması üçün, "theme" propunu bütün + // komponentlərdən keçmirmək çox yorucu ola biler. return (
diff --git a/examples/context/motivation-solution.js b/examples/context/motivation-solution.js index 94c6030a9..947c08b02 100644 --- a/examples/context/motivation-solution.js +++ b/examples/context/motivation-solution.js @@ -1,15 +1,15 @@ // highlight-range{1-4} -// Context lets us pass a value deep into the component tree -// without explicitly threading it through every component. -// Create a context for the current theme (with "light" as the default). +// Kontekst dəyərləri komponent ağacında hər komponentdən +// keçmədən lazım olan komponentə ötürməyə icazə verir. +// Cari şablon üçün yeni bir kontext yarat ("light" default dəyər kimi). const ThemeContext = React.createContext('light'); class App extends React.Component { render() { // highlight-range{1-3,5} - // Use a Provider to pass the current theme to the tree below. - // Any component can read it, no matter how deep it is. - // In this example, we're passing "dark" as the current value. + // Provider-dan istifadə edərək cari şablon dəyərini aşağıdakı ağaca göndərin. + // Dərinlikdən asılı olmayaraq, hər hansı bir komponent bu dəyəri oxuya bilər. + // Bu misalda, biz "dark" yazısını cari dəyər kimi göndəririk. return ( @@ -19,8 +19,8 @@ class App extends React.Component { } // highlight-range{1,2} -// A component in the middle doesn't have to -// pass the theme down explicitly anymore. +// Ortadakl komponent artıq +// şablon dəyərini açıq şəkildə göndərməməlidir. function Toolbar(props) { return (
@@ -31,9 +31,9 @@ function Toolbar(props) { class ThemedButton extends React.Component { // highlight-range{1-3,6} - // Assign a contextType to read the current theme context. - // React will find the closest theme Provider above and use its value. - // In this example, the current theme is "dark". + // cari şablon kontekstindən oxumaq üçün contextType təyin edin. + // React ən yaxın olan şablon Provider-i tapıb kontekstin dəyərindən istifadə edəcək. + // Bu misalda, cari şablonun dəyəri "dark"-dır. static contextType = ThemeContext; render() { return