آموزش React مقدماتی قسمت هشتم: Extracting Components

قسمت ها

در قسمت قبل ما مدیریت state را در برنامه React خود انجام دادیم. بدین ترتیب ما از state برای مدیریت متن جستجوی فعلی در کامپوننت App استفاده کردیم. در این قسمت، یک کامپوننت جستجوی جداگانه خواهیم ساخت. بنابراین، state را همچنان در کامپوننت App حفظ خواهیم کرد. این به ما امکان می دهد که همچنان از مقدار state برای فیلتر کردن لیست دوره ها و انتقال لیست فیلتر شده به کامپوننت CoursesList استفاده کنیم.

بیاید بازنویسی کد را شروع کنیم.

ایجاد یک کامپوننت Search جدید

بیایید ابتدا یک فایل جدید src/Search.js ایجاد کنیم. این فایل خالی برای پیاده سازی کامپوننت جدید Search استفاده می شود که باید مسئولیت خروجی از قسمت search input و label مربوطه را داشته باشد. پیاده سازی با استفاده از یک کامپوننت functional انجام می شود و کد به صورت زیر است:

در اینجا می توانید چند مفهوم را که قبلاً در مورد آنها آموخته ایم، تشخیص دهید. این کامپوننت با استفاده از یک arrow function پیاده سازی می شود. ازObject destructuring برای بیرون کشیدن مستقیم onSearch از پارامتر props استفاده می شود. با استفاده از prop onSearch، تابع event handler برای رویداد change عنصر input به آن کامپوننت منتقل می شود.

Import کردن کامپوننت Search

با استفاده از کامپوننت Search در Search.js، اکنون باید import مربوطه را در App.js اضافه کنیم تا بتوانیم از این کامپوننت جدید استفاده کنیم:

import Search from './Search';

استفاده از کامپوننت Search

با JSX، کامپوننت search می تواند به روش زیر اضافه شود:

label و فیلد input که قبلاً استفاده شده بودند، جایگزین شدند. همانطور که مشاهده می کنید از ویژگی onSearch برای اختصاص یک handler function استفاده می شود که نام آن handleSearch است.

مدیریت رویداد جستجو

تابع کنترل کننده رویداد handleSearch باید در تابع کامپوننت App پیاده سازی شده تا برای ست کردن state searchText استفاده شود:

مجددا، در ادامه می توانید کد کامل پیاده سازی کامپوننت App را پس از کار بازسازی که انجام داده ایم، مشاهده کنید:

در قسمت بعد می خوانید

در قسمت بعدی با React Effect Hook (useEffect) آشنا می شویم که به ما امکان می دهد side effect ها را در کامپوننت های functional انجام دهیم.

سعید نصیری
سعید نصیری

من برنامه نویس لاراول، PHP و طراح سایت هستم. برنامه نویسی موبایل و تولید اپلیکیشن های موبایل نیز بخش دیگری از توانایی های فردی من هست. تقریبا ده دوازده سالی تجربه مستمر در زمینه طراحی سایت دارم و نزدیک به یک سال هم میشه که در برنامه نویسی موبایل وارد شده ام.

× در حال پاسخ به: