برنامه نویسی

نکست جی اس (Next.js) قسمت چهارم

تیم فنی
تیم فنی

نمایش داده‌ها با استفاده از Props:


تا اینجا اگر می‌خواستید یک کامپوننت بسازید و در دو جای مختلف از آن استفاده کنید محتوای یکسانی نمایش داده می‌شد. مثلا اگر از کامپوننت </Header> در دو جای مختلف کدهایتان استفاده می‌کنید، در هر دو قسمت نیز محوای یکسانی نمایش داده خواهدشد:

 

اما اگر بخواهید متن مفاوتی را با ساختاری مشخص در جاهای مختلف نمایش دهید یا اطلاعات را می‌خواهید از منبعی دریافت کنید که هنوز نمی‌دانید چه چیزی هستند چکاری می‌توانید انجام دهید؟
المان‌های معمولی HTML اتربیوتی دارند که با استفاده از آن‌ها می‌توانید قسمتی از اطلاعات را انتقال و آن‌ها را تغییر دهید. برای مثال تغییر قسمت src یک تگ <img>، تصویری دیگر را به نمایش خواهد درآورد یا تغییر href یک تگ <a>، آن را به صفحه‌ای دیگر لینک خواهد کرد. در روشی مشابه می‌توان قسمتی از اطلاعات را به عنوان Properties به کامپوننت‌های React فرستاد که به آن‌ها Props گفته می‌شود:

 

مشابه یک تابع جاوا اسکریپت، می‌توانید کامپوننت‌ها و پراپس‌هایی تعریف کنید که آرگیومنت‌های دلخواه(Custom arguments) را قبول کنند که رفتار کامپوننت‌ها(Component Behaviors) یا آنچه را که باید در هنگام رندر صفحه نمایش دهند را تغییر می‌دهد. سپس می‌توانید این Propsها را از کامپوننت‌های Parent به کامپوننت‌های Child ارسال کنید.
نکته: در React، داده‌ها بر اساس درخت کامپوننت از بالا به پایین جریان می‌یابند که به آن جریان داده یکطرفه(One-way data flow) گفته می‌شود. استیت(یا State، که در قسمت بعد در مورد آن بحث خواهیم کرد)، می‌تواند مانند Props از کامپوننت‌های Parent به Child منتقل شود.


استفاده از Props:


در کامپوننت HomePage، می‌توانید یک title دلخواه را به کامپوننت Header ارسال کنید؛ درست مثل اینکه اتربیوت‌های HTML را ارسال می‌کنید:

 

و Header، که کامپوننت Child است، می‌تواند آن را به عنوان اولین پارامتر تابع(First function parameter) بپذیرد: 

 

اگر Props را console.log() بگیرید، می‌توانید شاهد یک Object با عنوان(title) دلخواهی که انتخاب کرده‌اید باشید:

 

از آنجایی که Props یک آبجکت است، می‌توانید از ساختارشکنی آبجکت(Object destructuring) برای نام گذاری مقادیر Props در پارامترهای فانکشن استفاده کنید:

 

سپس می‌توانید عنوان متغییر(title variable) خود را با محتوای تگ <h1> عوض کنید: 

 

اگر پروژه خود را در مرورگر باز کنید، می‌توانید شاهد نمایش کلمه واقعی “title” باشید. این برای آن است که React فکر می‌کند شما می‌خواهید یک رشته(String) من ساده را در DOM ارائه کنید؛ پس نیاز به روشی دارید که به React بفهمانید که این یک متغییر جاوا اسکریپت است.


استفاده از متغییرها در JSX:


برای استفاده از متغییری که تعریف کرده‌اید، می‌توانید از آکولاد(Curly braces) استفاده کنید. یک سینتکس(Syntax) مخصوص که به شما این اجازه را می‌دهد تا جاوا اسکریپت معمولی را مستقیماً در نشانه‌گذاری JSX(JSX markup) خود بنویسید:

 

می‌توان اینگونه در نظر گرفت که این آکولادها وقتی شما در دنیای JSX هستید، کلیدهایی برای ورود به دنیای جاوا اسکریپت هستند. می‌توانید هر عبارت جاوا اسکریپت را (چیزی که به عنوان یک مقدار واحد ارزیابی می‌شود) را در آکولاد اضافه کنید. برای مثال:
۱) یک object property به همراه dot notation:

 

۲) یک تمپلیت لیترال (a template literal):

 

۳) مقدار برگشتی یک فانکشن:

 

۴) و در نهایت ternary operatorها:

 

اکنون می‌توانید هر استیرینگی را بهtitle  پایه و اصلی خود منتقل کنید؛ و از آنجایی که حالت ternary operator را به عنوان پیش فرض در کامپوننت خود انتخاب نموده اید، حتی نمی‌توانید یک title prop را ارسال کنید:

 

اکنون کامپوننت شما یک title عمومی را می‌پذیرد که می‌توانید در بخش‌های مختلف برنامه مجدداً از آن استفاده کنید. تنها کاری که نیاز است انجام دهید تغییر title است:

 

تکرار از طریق لیست‌ها:


این بسیار عادی ست که داده‌هایی داشته باشید که بخواهید آن‌ها را به صورت بیست نمایش دهید. برای این کار می‌توانید از روش آرایه(Array) برای ایجاد تغییرات داده‌ها و ایجاد المان‌های رابط کاربری که از نظر استایل(Style) یکی هستند اما اطلاعات مختلفی را در خود نگه می‌دارند، استفاده کنید. 
نکته: وقتی صحبت از فچ کردن داده‌ها(data fetching) به میان می‌آید، React بی‌نظیر است. این به آن معناست که شما می‌توانید بهترین راه حل را انتخاب کنید که با نیازهای شما مطابقت دارد. بعدها، در مورد data fetching options در Next.js بیشتر بحث خواهیم کرد. اما در حال حاضر، می‌توانید از یک آرایه ساده برای نمایش داده‌ها استفاده کنید.
یک آرایه متشکل از چند اسم را در کامپوننت HomePage ایجاد کنید:

 

سپس می‌توانید از روش array.map() جهت تکرار بر روی آرایه و از یک arrow function برای map کردن یک اسم به یک item list استفاده کنید: 

 

به نحوه استفاده از آکولاد جهت اتصال جاوا اسکریپت و JSX به یکدیگر توجه داشته باشید. اگر این کد را اجرا کنید، React به ما هشداری در رابطه با گم شدن یک key پایه می‌دهد. این هشدار به این علت است که React برای شناسایی منحصر به فرد یا همان یونیک(Unique) آیتم‌ها در یک آرایه به چیزی نیاز دارد تا متوجه شود کدام المان‌ها را در DOM به روزرسانی کند. در حال حاضر می‌توانید ار نام‌ها استفاده کنید چون منحصر به فرد هستند اما پیشنهاد می‌شود در آینده از چیزی استفاده کنید که مطمئن هستید انحصاراً فقط متعلق به یک چیز خاص است، مانند item ID.

 

در قسمت بعدی با مفهوم State و نحوه گوش دادن به رویدادهای کاربر(listen to user events) در React بیشتر آشنا خواهیم‌شد.

قصد انجام پروژه خاصی را دارید؟

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

با ما تماس بگیرید

مشاوره با ما