سلام عزیزان ، خدا قوت . به پارت ششم از سری مقالات "مقدمات React" خیلی خوش اومدین ، قدم رنجه فرمودین ، منت بر سر بنده حقیر گذاشتین ، خلاصه یطوری خوشحالمون کردین :) خوب چخبرا ؟ همه چی روبه راهه ؟ امیدوارم مقاله ی قبلی رو به خوبی کاور کرده باشین و اولین کامپوننت خودتون رو مثل هلو توسعه داده باشین و با انرژی کافی اومده باشین سراغ این مقاله !
رفقا در این قسمت قصدا داریم با مفهوم ارسال داده از یک کامپوننت والد به یک کامپوننت فرزند از طریق props آشنا بشیم . اما قبل از شروع این موضوع بهتره با مفهوم خروجی داینامیک آشنا بشیم و ببینیم که اصلاً چطور میتونیم داده ای رو بصورت داینامیک تو خروجی نمایش بدیم !؟ ما تا اینجا تونستیم یک کامپوننت ساده رو ایجاد کنیم و داده ی خودمون رو نمایش بدیم ، اما هنوز یک مشکلی وجود داره ! چون در اکثر اوقات در برنامه های React ی ، داده های برنامه ی ما صرفا بصورت یک رشته ی ساده و ثابت نیستن و ما نیاز داریم که در طی روند توسعه ی برنامه هامون ، داده ها رو بصورت داینامیک یا پویا تعریف کنیم . بطور مثال به کامپوننت Person سری میزنیم و اونو به شکل زیر تغییر میدیم :
حالا اگر بخوایم به جای X یک عدد نمایش بدیم ، برای شروع میتونیم از متد ( )Math.random استفاده کنیم تا برامون یک عدد تصادفی تولید کنه :
تو کد بالا ، از متد Math.floor( ) هم استفاده کردیم تا عدد تصادفی خروجی بصورت اعشاری در نیاد و به سمت پایین گرد بشه ! حالا اگر فایل Person.jsx رو در همین حالت ذخیره کنیم و به مرورگر بریم میبینیم که خروجی ما به این شکل خواهد بود و مقدار age به ازای هر بار رفرش صفحه بصورت رندوم تغییر میکنه :
توجه کنیم که ما نمیتونیم در داخل curly braces ها عناصر پیچیده ای مثل کلاس ها و . . . رو تعریف کنیم ، بلکه فقط میتونیم expression های ساده و تک خطی مثل همین عدد تصادفی یا صدا زدن توابع رو در داخلش بنویسیم . حالا بیایم به مفهوم props بپردازیم ! اگر بخوام خیلی روون توضیح بدم ، باید خدمتتون بگم که ما اگر بخوایم از طریق کامپوننت والد که در اینجا کامپوننت App هست ، به یک کامپوننت فرزند که در اینجا کامپوننت Person هست ، داده ای رو ارسال کنیم باید از props استفاده کنیم ! در واقع props روشی برای ارسال داده هست . حالا سوالی که پیش میاد این هست که props به چه صورتی عمل میکنه ؟
همونطور که میدونیم ما میتونیم به عناصرمون خصوصیات (attributes) مختلفی مثل className اضافه کنیم ، اما حالا اگر بخوایم در فایل App.js به کامپوننت Person چنین attribute هایی اضافه کنیم چطور ?
همونطور که مشخصه در اینجا ما برای هر Person خصوصیات fname و lname و age رو تعریف کردیم . همچنین برای Person دوم تگ پایانی هم قرار دادیم و بین دو تگ عبارت My Hobbies : Racing رو نوشتیم . حالا اگر تغییرات رو ذخیره کنیم و به مرورگرمون بریم ، خواهیم دید که هیچ تغییری ایجاد نشده ! چون react نمیدونه که با این اطلاعات باید چیکار کنه ! در واقع نکته ی جالب اینجاست که react این attribute ها رو میگیره و در شئ ای بنام props که مخفف properties هست قرار میده و بعد ما میتونیم از طریق کامپوننت دریافت کننده ، این اطلاعات رو دریافت کنیم و ازشون استفاده کنیم ! پس react آبجکت props رو بصورت آرگومان ورودی به کامپوننت Person ارسال میکنه و ما باید این آبجکت رو دریافت کنیم (البته توجه کنیم که نیازی نیست اسم آرگومان رو حتما props بزاریم ، اما برای راحت تر بودن یادگیری ، از همون props استفاده میکنیم) :
حالا باید اطلاعات دریافتی از شئ props رو بصورت زیر وارد JSX مون کنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین خروجی ای رو مشاهده خواهیم کرد :
حالا سوالی که ممکنه پیش بیاد این هست که چرا قسمت My Hobbies : Racing در خروجی برنامه مون نمایش داده نشده !? برای رفع این مشکل ، React برای ما یک راه حلی به اسم props.children داره ، به اینصورت که در داخل خود کامپوننت Person ما میتونیم یک مقدار JSX جدید بنویسیم و این مقدار جدید رو برای زمانی تعیین کنیم که کامپوننتمون قرار هست به عنوان content یک دیتای nested داشته باشه :
در واقع وقتی ما این کارو میکنیم ، یک مقدار JSXساخته میشه و این به این معنی هست که وقتی کامپوننت Person فراخونی میشه ، میتونه مقادیر nested یا content هم در داخلش داشته باشه . پس این دستور رو به فایل Person.jsx اضافه میکنیم :
حالا اگر فایل Person رو در همین حالت ذخیره کنیم و به مرورگر بریم ، میبینیم که خروجی ما به این شکل خواهد بود :
در نهایت برای حرفه ای تر عمل کردن میتونیم به اینصورت از خاصیت Object Destructuring استفاده کنیم :
خوب دوستان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . همچنین اگر که این مطلب براتون مفید بوده ، میتونین با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)
راستی بخش بعدی که میشه بخش هفتم از سری مقالات آموزشی مقدماتی React رو به هیچ عنوان از دست ندید ، چراکه قرار هست مفهوم State در React رو ببریم زیر ذره بین و دل و روده اش رو مثل سایر مفاهیم بشکافیم بریزیم بیرون و ببینیم که کلا چیه و چطور میتونیم ازش استفاده کنیم :)
