سلام عزیزان ، به پارت دهم از سری مقالات "مقدمات React" خوش اومدین . امیدوارم پارت های قبلی رو به خوبی کاور کرده باشین و بعد اومده باشین سراغ این مقاله ! در این قسمت میخوایم با مفهوم رندر شرطی یا اصطلاحا Conditional Rendering آشنا بشیم ، یعنی میخوایم تنها در صورت برقرار بودن شرط خاصی کامپوننت مورد نظرمون رو رندر کنیم . برای درک بهتر شمارو به ادامه ی این مقاله دعوت میکنم :)
به عنوان مثال فرض کنیم دکمه ای داریم که میخوایم هنگام کلیک بر روی اون ، لیست افراد پنهون بشه و هنگامیکه مجددا بر روی اون کلیک میشه ، لیست افراد از دوباره نمایش داده بشه (عمل Toggle) . برای این منظور در ابتدا در داخل کامپوننت App یک دکمه ساده بصورت زیر تعریف میکنیم :
و بعد یک state جدید به state قبلیمون اضافه میکنیم :
سپس یک handler جدید بصورت زیر تعریف میکنیم تا به ازای هر بار کلیک کردن بر روی دکمه ، وضعیت state رو تغییر بده :
در مرحله ی بعد برای اینکه بتونیم منطق برنامه مون رو تکمیل کنیم ، باید به اینصورت عمل کنیم :
در نهایت با استفاده از روش استایل دهی inline میایم button مون رو به اینصورت استایل دهی میکنیم تا ظاهر بهتری داشته باشه :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز داره به درستی کار میکنه :
حالا بهتره که عنوان و استایل دکمه ی موردنظرمون رو هم بصورت داینامیک تغییر بدیم ! یعنی زمانیکه افراد نمایش داده میشن ، Button مون با عنوان "پنهان کردن اشخاص" و با رنگ قرمز نمایش داده بشه و هنگامیکه افراد نمایش داده نمیشن ، Button مون با عنوان "نمایش اشخاص" و با رنگ سبز نمایش داده بشه ! برای این منظور کافیه بصورت زیر عمل کنیم :
حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، به ازای هر بار کلیک بر روی دکمه شاهد تغییرات خواهیم بود :)
خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم بعد از خوندن این مقاله مفهوم Conditional Rendering به خوبی براتون جا افتاده باشه و لذت برده باشین . در رابطه با این مقاله هم اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین .
راستی یادتونه گفته بودم در رابطه با موضوع استایل دهی بازهم مقاله خواهیم داشت !؟ خوب در قسمت بعدی دقیقا به این موضوع میپردازیم و برای همیشه پرونده ی استایل دهی در React رو باهم میبندیم !
