Skip to content

Commit b2e2811

Browse files
committed
fix errors
1 parent d4feb58 commit b2e2811

File tree

1 file changed

+5
-6
lines changed

1 file changed

+5
-6
lines changed

src/content/learn/thinking-in-react.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,7 @@ state
264264
یعنی ما فقط متن جستجو شده و مقدار تکست باکس را به عنوان استیت نگه میداریم
265265

266266
<DeepDive>
267-
268-
### Props vs State {/*props-vs-state*/}
267+
#### Props vs State {/*props-vs-state*/}
269268

270269

271270
دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props).
@@ -283,7 +282,7 @@ state
283282

284283

285284

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*/}
287286

288287
بعد از شناسایی داده‌های حداقلی مرتبط با برنامه‌ی شما، نیاز دارید تعیین کنید که کدام کامپوننت مسئول تغییر این داده‌هاست، یا به عبارتی، مالک (owns) این داده‌ها است. به یاد داشته باشید: ری‌اکت از جریان داده‌ی یک طرفه استفاده می‌کند و داده‌ها را از کامپوننت والد به کامپوننت‌های فرزند در سلسله‌مراتب ارسال می‌کند. ممکن است اولیه‌اش که کدام کامپوننت باید مالک داده‌هایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شده‌اید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این
289288

@@ -486,11 +485,11 @@ function SearchBar({ filterText, inStockOnly }) {
486485
با این حال، هنوز کدی برای پاسخ به اقدامات کاربر مانند تایپ کردن اضافه نکرده‌اید. این مرحله آخر شما خواهد بود.
487486
</p>
488487
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*/}
490489
<p dir="rtl">
491490
در حال حاضر برنامه‌ی شما با پراپ‌ها و استیت‌ها که از بالا به پایین سلسله‌مراتب به‌خوبی رندر می‌شود. اما برای تغییر استیت بر اساس ورودی کاربر، شما نیاز به پشتیبانی از جریان داده به سمت دیگر دارید: کامپوننت‌های فرم (form components) که در عمق سلسله‌مراتب هستند باید استیت را در FilterableProductTable به‌روزرسانی دهنده.
492491
493-
ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن <input value={filterText} />، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند.
492+
ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن `<input value={filterText} />`، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند.
494493
495494
شما می‌خواهید طوری عمل کنید که هر زمان کاربر ورودی‌های فرم را تغییر دهد، استیت به‌روزرسانی شود تا تغییرات نمایان شود. استیت توسط FilterableProductTable مدیریت می‌شود، بنابراین تنها این کامپوننت می‌تواند توابع setFilterText و setInStockOnly را فراخوانی کند. برای اجازه دادن به SearchBar برای به‌روزرسانی استیت FilterableProductTable، شما باید این توابع را به SearchBar ارسال کنید.
496495
@@ -672,7 +671,7 @@ td {
672671
673672
برای کسب اطلاعات بیشتر در مورد کنترل روی‌داد‌ها و به روز‌رسانی استیت متوانید به قسمت [افزودن تعاملات](/learn/adding-interactivity) مراجعه کنید.
674673
675-
## Where to go from here {/* where-to-go-from-here */}
674+
## Where to go from here {/*where-to-go-from-here*/}
676675
677676
این مقدمه‌ای بسیار کوتاه بود برای آشنایی با نحوه‌ی فکر کردن در مورد ساخت کامپوننت‌ها و برنامه‌ها با ری‌اکت. شما می‌توانید همین حالا یک پروژه‌ی ری‌اکت راه‌اندازی کنید یا به عمق بیشتری درباره‌ی تمام دستورالعمل‌ها (سینتکس) استفاده‌شده در این آموزش بپردازید.
678677

0 commit comments

Comments
 (0)