From 886941cf47a453f9e7716d00ea5f9b81216c3e36 Mon Sep 17 00:00:00 2001 From: "e.yari@inotek.ir" Date: Tue, 19 Sep 2023 15:29:31 +0330 Subject: [PATCH 1/2] translation of Sharing State Between Components #357 --- .../learn/sharing-state-between-components.md | 219 +++++++++++++----- 1 file changed, 155 insertions(+), 64 deletions(-) diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 149164fe1..67a829852 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -1,31 +1,38 @@ --- -title: Sharing State Between Components +title: بین کامپوننت‌ها state به اشتراک گذاشتن --- - + -Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code. +
گاهی اوقات، شما میخواهید که state دو کامپوننت همیشه با هم تغییر کند. برای انجام این کار، state را از هر دو کامپوننت حذف کنید، آن را به نزدیکترین والد مشترک آنها منتقل کنید، و سپس آن را از طریق props به آنها منتقل کنید. این به عنوان بالا بردن state شناخته میشود، و این یکی از متداول ترین کارهایی است که شما در حین نوشتن کد ری‌اکت انجام خواهید داد.
 -- How to share state between components by lifting it up -- What are controlled and uncontrolled components +-
چگونه state را با بالا بردن آن بین کامپوننت‌ها به اشتراک بگذارید
+- کامپوننت‌ های کنترل شده و کنترل نشده چیست -## Lifting state up by example {/*lifting-state-up-by-example*/} -In this example, a parent `Accordion` component renders two separate `Panel`s: +
+## بالا بردن state با مثال {/*lifting-state-up-by-example*/} +
+ +
در این مثال یک کامپوننت والد `Accordion` دو کامپوننت جداگانه `Panel` را رندر میکند:
+ + +
* `Accordion` - `Panel` - `Panel` +
-Each `Panel` component has a boolean `isActive` state that determines whether its content is visible. +
هر کامپوننت `Panel` یک `isActive` state دارد که مشخص میکند که آیا محتوای آن قابل مشاهده است یا خیر.
-Press the Show button for both panels: +
برای هر دو کامپوننت `Panel` دکمه Show را فشار دهید:
@@ -73,59 +80,81 @@ h3, p { margin: 5px 0px; } -Notice how pressing one panel's button does not affect the other panel--they are independent. +
توجه کنید که فشار دادن دکمه یکی از پنل‌ها بر روی پنل دیگر تاثیری ندارد--آنها مستقل هستند.
-Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed + +
در ابتدا، `isActive` state هر `Panel` برابر `false` است، بنابراین هر دو به صورت فشرده نمایش داده میشوند.
 -Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone +
کلیک کردن روی دکمه هر `Panel` فقط state `isActive` آن `Panel` را به روز میکند.
 -**But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that? +
**اما حالا فرض کنید که میخواهید فقط یک پنل در هر زمان باز شود.** در این طراحی، باز کردن پنل دوم باید پنل اول را ببندد. چگونه این کار را انجام میدهید؟
-To coordinate these two panels, you need to "lift their state up" to a parent component in three steps: +
برای هماهنگ کردن این دو پنل، شما باید state آنها را به یک کامپوننت والد در سه مرحله "بالا ببرید":
-1. **Remove** state from the child components. -2. **Pass** hardcoded data from the common parent. -3. **Add** state to the common parent and pass it down together with the event handlers. +
+1. **حذف** state از کامپوننت‌های فرزند. +2. **انتقال** داده‌های ثابت از والد مشترک. +3. **اضافه کردن** state به والد مشترک و انتقال آن همراه با event handlers. +
-This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time. +
این به کامپوننت `Accordion` اجازه میدهد که هر دو `Panel` را هماهنگ کند و فقط یکی را در هر زمان باز کند.
-### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} +
+### قدم ۱: حذف state از کامپوننت‌های فرزند {/*step-1-remove-state-from-the-child-components*/} +
-You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component: +
+شما کنترل `isActive` را به کامپوننت والد `Panel` میدهید. این به این معنی است که کامپوننت والد `isActive` را به عنوان یک prop به `Panel` منتقل میکند. با **حذف این خط** از کامپوننت `Panel` شروع کنید: +
```js const [isActive, setIsActive] = useState(false); ``` -And instead, add `isActive` to the `Panel`'s list of props: + +
+و به جای آن، `isActive` را به لیست prop های `Panel` اضافه کنید: +
+ ```js function Panel({ title, children, isActive }) { ``` -Now the `Panel`'s parent component can *control* `isActive` by [passing it down as a prop.](/learn/passing-props-to-a-component) Conversely, the `Panel` component now has *no control* over the value of `isActive`--it's now up to the parent component! +
+حالا کامپوننت والد `Panel` میتواند `isActive` را با [انتقال آن به عنوان prop](/learn/passing-props-to-a-component) کنترل کند. متقابلا، کامپوننت `Panel` دیگر کنترلی بر روی مقدار `isActive` ندارد--حالا این کار به عهده کامپوننت والد است! +
+ +
+### قدم ۲: انتقال داده‌های ثابت از والد مشترک {/*step-2-pass-hardcoded-data-from-the-common-parent*/} +
-### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/} -To lift state up, you must locate the closest common parent component of *both* of the child components that you want to coordinate: +
+برای بالا بردن state، شما باید نزدیکترین کامپوننت والد مشترک میان دو کامپوننت فرزند که میخواهید آن ها را هماهنگ کنید، پیدا کنید: +
-* `Accordion` *(closest common parent)* +
+* `Accordion` *(نزدیک ترین والد مشترک)* - `Panel` - `Panel` +
-In this example, it's the `Accordion` component. Since it's above both panels and can control their props, it will become the "source of truth" for which panel is currently active. Make the `Accordion` component pass a hardcoded value of `isActive` (for example, `true`) to both panels: +
+در این مثال، این کامپوننت `Accordion` است. از آنجایی که این کامپوننت بالاتر از هر دو پنل قرار دارد و میتواند prop های آنها را کنترل کند، این کامپوننت منبع اصلی برای اینکه کدام پنل در حال حاضر فعال است میباشد. کامپوننت `Accordion` را طوری تغییر دهید که مقدار ثابت `isActive` را (به عنوان مثال، `true`) به هر دو پنل منتقل کند: +
@@ -172,21 +201,33 @@ h3, p { margin: 5px 0px; } -Try editing the hardcoded `isActive` values in the `Accordion` component and see the result on the screen. +
+سعی کنید مقادیر `isActive` را در کامپوننت `Accordion` ویرایش کنید و نتیجه را در صفحه مشاهده کنید. +
-### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/} +
+### قدم ۳: اضافه کردن state به والد مشترک {/*step-3-add-state-to-the-common-parent*/} +
-Lifting state up often changes the nature of what you're storing as state. +
+بالا بردن state معمولا طبیعت آنچه را که به عنوان state ذخیره میکنید تغییر میدهد. +
-In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable: +
+در این مثال، فقط یک پنل در هر زمان باید فعال باشد. این به این معنی است که کامپوننت والد مشترک `Accordion` باید اینکه کدام پنل فعال است را پیگیری کند. به جای یک مقدار `boolean`، میتوانید از یک عدد به عنوان ایندکس پنل فعال برای متغیر state استفاده کنید: +
```js const [activeIndex, setActiveIndex] = useState(0); ``` -When the `activeIndex` is `0`, the first panel is active, and when it's `1`, it's the second one. +
+هنگامی که `activeIndex` برابر `0` است، پنل اول فعال است، و هنگامی که برابر `1` است، پنل دوم فعال است. +
-Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props): +
+کلیک کردن روی دکمه "Show" در هر `Panel` باید ایندکس فعال در `Accordion` را تغییر دهد. یک `Panel` نمیتواند state `activeIndex` را مستقیما تغییر دهد زیرا در داخل `Accordion` تعریف شده است. کامپوننت `Accordion` باید به صورت صریح به کامپوننت `Panel` اجازه دهد که state آن را تغییر دهد با [انتقال یک event handler به عنوان prop](/learn/responding-to-events#passing-event-handlers-as-props): +
```js <> @@ -205,7 +246,9 @@ Clicking the "Show" button in either `Panel` needs to change the active index in ``` -The `