آموزش fragment در React

سلام به همه عاشقان ریکت

تو ریکت یه مبحثی به نام Fragment وجود داره که ممکنه تو خیلی از کامپوننت ها بهش نیاز داشته باشین.

بحث Fragment بر خلاف اسم گلمبه ای که داره، مفهوم خیلی ساده و قابل فهمی داره.

خب بریم ببینیم چه خبره...

همون طور که میدونین هر کامپوننت تو ریکت فقط میتونه یه تگ والد رو return کنه، هم کلاس کامپوننت ها و هم فانکشنال کامپوننت ها.

فرض کنین میخوایم یه کامپوننت واسه table ایجاد کنیم و واسه ایجاد td های اون از یه کامپوننت به اسم Column استفاده کنیم.

خب همون طور که میبینین واسه ایجاد td ها از کامپوننت Column استفاده کردیم و انتظار داریم td های لازم رو برامون ایجاد کنه.

اما کامپوننت Column مجبوره که tdها رو داخل یه تگ والد returnکنه تا ریکت خطای نده.

خروجی Table اینطوری میشه:

ولی این خروجی قابل قبول و مورد نظر ما نیست.

اینجاست که Fragment میاد وسط.

بعضی وقتا ممکنه بخواین تو یه کامپوننتی چندین تگ رو return کنین ولی ریکت بهتون خطا میده، اگه تو div هم بذارین ممکنه به مشکل بخورین!
تو همچین مواقعی میتونین از React.fragment استفاده کنین.

خب React.fragment این امکان رو بهتون میده که تو یه کامپوننت، چندین تگ رو بدون نیاز به والد return کنین.

کافیه تگ هایی رو که میخواین return کنین، بذارین تو تگ React.fragment.

کامپوننت Column رو به شکل زیر تغییر میدیم

به این ترتیب خروجی کامپوننت Table به این شکل خواهد بود:

به همین راحتی مشکلمون حل میشه.

یه شورتکات واسه React.fragment

شما میتونین به جای React.fragment از یه تگ خالی استفاده کنین:

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

اتربیوت key تو React.fragment

اگه اطلاعات مربوط به template کامپوننتتون تو یه آرایه باشه و بخواین با متدی مثل map آرایه رو پیمایش کرده و تمپلیت رو return کنین، باید به React.fragment اتربیوت keyبدین(مثل قبلا که برای تگ والد template کامپوننتتون از keyاستفاده می کردین.)

نکته مهم: اتربیوت key تنها اتربیوتی هست که میتونین به React.fragment پاس بدین و به جز key نمیتونین اتربیوت دیگه ای استفاده کنین.
طبق گفته خود تیم ریکت، در آینده اتربیوت های دیگه ای مثل Event Handler ها به React.fragment اضافه خواهد شد.

خب...

امیدوارم این مقاله براتون مفید واقع شده باشه.
اگه پیشنهاد یا انتقادی دارین، خوشحال میشم کامنت کنین.
تا مقاله بعدی خدانگهدار :)