آموزش React مقدماتی قسمت سوم: کار با listها

قسمت ها

تعریف لیستی از Objectها

در قسمت آخر ما درباره کامپوننت های React و کد JSX اطلاعات بیشتری کسب کردیم. در این قسمت از مجموعه آموزش React مقدماتی، می خواهم شما را با نحوه کار با لیست ها در React آشنا کنم. بیایید دوباره از فایل src/App.js استفاده کنیم تا یک لیست ساده به عنوان آرایه ای از اشیا خارج از کامپوننت اجرایی اضافه کنیم:

رندر کردن لیست ها در JSX

اکنون که آرایه courses را خارج از کامپوننت App تعریف کردیم، اجازه دهید از این لیست داده ها در کد JSX کامپوننت App استفاده کنیم. در مرحله اول اجازه دهید اطلاعات title هر دوره را ارائه دهیم:

برای تکرار در لیست دوره ها ، ما از تابع map JavaScript در داخل یک بلوک expression در کد JSX استفاده می کنیم. یک function به فراخوان map پاس داده می شود. سپس این تابع برای هر مورد در آرایه courses اجرا می شود. شی فعلی course توسط پارامتر course در داخل آن تابع در دسترس قرار می گیرد. بنابراین می توان با استفاده از course.title به title هر course دسترسی پیدا کرد

راه اندازی مجدد وب سرور توسعه با استفاده از دستور زیر

$ npm start

باید نتیجه زیر را در مرورگر به ما بدهد:

10.png

تنظیم ویژگی key

هنگام افزودن کد برای ارائه عناصر list (مانند آنچه ما انجام دادیم) توصیه می شود که ویژگی key را نیز اضافه کنید و یک مقدار منحصر به فرد به آن اختصاص دهید. keyها به React کمک می کنند تا مشخص شود چه مواردی تغییر کرده، اضافه شده یا حذف شده است. باید کلیدهایی به عناصر داخل آرایه داده شود به طوری که هر عنصر، یک identify پایدار داشته باشند.

بنابراین یک ویژگی id را به اشیای course خود در داخل آرایه courses اضافه می کنیم و سپس از این مقدار ویژگی برای تنظیم key در کد JSX استفاده کنیم:

گسترش خروجی list

تاکنون فقط عنوان هر دوره را چاپ کرده ایم. البته ما می توانیم کد JSX خود را برای تولید همه خصوصیات دوره گسترش بدهیم:

سپس خروجی در مرورگر باید مطابق با آنچه در تصویر زیر می بینید مطابقت داشته باشد:

20.png

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

تاکنون ما فقط از یک component در برنامه React خود استفاده کرده ایم: کامپوننت App. اگر برنامه رشد کند و پیچیده تر شود، تقسیم کد در چندین component منطقی است. نحوه کار با چندین component در React در قسمت بعدی ارائه خواهد شد.

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

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

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