اضافه کردن شرطی ویژگی به React Component



visibility  
mode_comment   ۲

اضافه کردن شرطی ویژگی به React Component

در این مطلب میخوایم یاد بگیریم که چطور میتونیم بصورت شرطی ویژگی های مورد نظرمون رو به کامپوننتها یا React component اضافه کنیم. بعضی اوقات نیاز دارید که در شرایط خاصی ویژگی رو اضافه کنید.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

برای ویژگی های خاصی خود React به ما کمک میکنه و زمانی که مقداری که true نیست رو به اون پاس بدیم، اصلا اون ویژگی رو اضافه نمیکنه و ما رو به هدفمون میرسونه. کد زیر رو ببینید:

همونطور که میبینید یک کامپوننت ساده بنام InputComponent ساختیم که فقط متد render در اون قرار داده شده. دو متغیر برای required و disabled تعریف کردیم و به ترتیب اونا رو برابر با true و false قرار دادیم. این متغیرها رو به عنوان مقدار برای ویژگی های متناظر المنت input قرار دادیم. خروجی در مرورگر بصورت زیر میشه:

همونطور که میبینید فقط ویژگی required اضافه شده و چون disabled مقدار false رو براش قرار دادیم، React از اون صرف نظر میکنه و اون رو برای المنت input قرار نمیده.

روشهای دیگه ای هم برای انجام این کار هستن. کد زیر رو ببینید:

همونطور که میبینید در ابتدا یک شئ بنام inputProps تعریف کردیم و دو ویژگی رو برای اون قرار دادیم. در خط 6 تحت شرایط خاصی ویژگی disabled رو نیز برابر با true قرار میدیم. حالا میتونیم از شئ inputProps استفاده کنیم و اون به کامپوننت React معرفی کنیم. بصورت زیر:

همونطور که میبینید در بالا از spread operator استفاده کردیم و تمام ویژگی های درون شئ inputProps رو به عنوان ویژگی برای React component قرار دادیم. هر ویژگی که بعد از ... قرار بدیم و درون شئ inputProps نیز وجود داشته باشه، بازنویسی میشه.

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران
kianartt

سلام
react بهتره یا وو؟؟؟
من سایت تشریفات عروسی دارم و می خوام قالبشو خوب کنم ولی پلاگین های ورد پرس سربار زیادی میزارن به همین دلیل می خواستم خودم طراحی کنم
نظر شما چیه؟

مصطفی قدیمی

اگه وردپرس استفاده میکنید Vue بهتره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.