You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/thinking-in-react.md
+5-6Lines changed: 5 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -264,8 +264,7 @@ state
264
264
یعنی ما فقط متن جستجو شده و مقدار تکست باکس را به عنوان استیت نگه میداریم
265
265
266
266
<DeepDive>
267
-
268
-
### Props vs State {/*props-vs-state*/}
267
+
#### Props vs State {/*props-vs-state*/}
269
268
270
269
271
270
دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props).
@@ -283,7 +282,7 @@ state
283
282
284
283
285
284
286
-
## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
285
+
## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
287
286
288
287
بعد از شناسایی دادههای حداقلی مرتبط با برنامهی شما، نیاز دارید تعیین کنید که کدام کامپوننت مسئول تغییر این دادههاست، یا به عبارتی، مالک (owns) این دادهها است. به یاد داشته باشید: ریاکت از جریان دادهی یک طرفه استفاده میکند و دادهها را از کامپوننت والد به کامپوننتهای فرزند در سلسلهمراتب ارسال میکند. ممکن است اولیهاش که کدام کامپوننت باید مالک دادههایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شدهاید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این
289
288
@@ -486,11 +485,11 @@ function SearchBar({ filterText, inStockOnly }) {
486
485
با این حال، هنوز کدی برای پاسخ به اقدامات کاربر مانند تایپ کردن اضافه نکردهاید. این مرحله آخر شما خواهد بود.
487
486
</p>
488
487
489
-
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
488
+
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
490
489
<p dir="rtl">
491
490
در حال حاضر برنامهی شما با پراپها و استیتها که از بالا به پایین سلسلهمراتب بهخوبی رندر میشود. اما برای تغییر استیت بر اساس ورودی کاربر، شما نیاز به پشتیبانی از جریان داده به سمت دیگر دارید: کامپوننتهای فرم (form components) که در عمق سلسلهمراتب هستند باید استیت را در FilterableProductTable بهروزرسانی دهنده.
492
491
493
-
ریاکت این جریان داده را صریحاً اعلام میکند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چکباکس را انتخاب کنید، مشاهده خواهید کرد که ریاکت ورودیهای شما را نادیده میگیرد. این عمدی است. با نوشتن <input value={filterText} />، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار دادهاید که از FilterableProductTable به آن منتقل میشود. از آنجایی که استیت filterText هرگز تنظیم نمیشود، ورودی هرگز تغییر نمیکند.
492
+
ریاکت این جریان داده را صریحاً اعلام میکند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چکباکس را انتخاب کنید، مشاهده خواهید کرد که ریاکت ورودیهای شما را نادیده میگیرد. این عمدی است. با نوشتن `<input value={filterText} />`، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار دادهاید که از FilterableProductTable به آن منتقل میشود. از آنجایی که استیت filterText هرگز تنظیم نمیشود، ورودی هرگز تغییر نمیکند.
494
493
495
494
شما میخواهید طوری عمل کنید که هر زمان کاربر ورودیهای فرم را تغییر دهد، استیت بهروزرسانی شود تا تغییرات نمایان شود. استیت توسط FilterableProductTable مدیریت میشود، بنابراین تنها این کامپوننت میتواند توابع setFilterText و setInStockOnly را فراخوانی کند. برای اجازه دادن به SearchBar برای بهروزرسانی استیت FilterableProductTable، شما باید این توابع را به SearchBar ارسال کنید.
496
495
@@ -672,7 +671,7 @@ td {
672
671
673
672
برای کسب اطلاعات بیشتر در مورد کنترل رویدادها و به روزرسانی استیت متوانید به قسمت [افزودن تعاملات](/learn/adding-interactivity) مراجعه کنید.
674
673
675
-
## Where to go from here {/*where-to-go-from-here*/}
674
+
## Where to go from here {/*where-to-go-from-here*/}
676
675
677
676
این مقدمهای بسیار کوتاه بود برای آشنایی با نحوهی فکر کردن در مورد ساخت کامپوننتها و برنامهها با ریاکت. شما میتوانید همین حالا یک پروژهی ریاکت راهاندازی کنید یا به عمق بیشتری دربارهی تمام دستورالعملها (سینتکس) استفادهشده در این آموزش بپردازید.
0 commit comments