آموزش کاربرد Fragment در کتابخانه معروف React



visibility  
mode_comment   ۰

آموزش کاربرد Fragment در کتابخانه معروف React

در این مطلب میخوایم کاربرد Fragment ها در React رو بررسی کنیم و ببینیم که در کدنویسی چه کمکی به ما میکنن. با استفاده از این تگ که اخیرا به React اضافه شده است میتونین بدون اضافه کردن یک المنت اضافی به DOM، تعدادی المنت در کنار یکدیگر قرار بدین. با ما همراه باشید.

در React خیلی پیش میاد که چند المنت دیگه رو بخواید در یک Component رندر کنید. Fragment ها به شما این اجازه رو میدن که بدون اضافه کردن یک المنت جدید به DOM، لیستی از فرزندان رو رندر کنید. کد زیر رو ببینید:

یک سینتکس راحت و سریعتر هم جدیدا اضافه شده که در ادامه توضیح میدم اما به دلیل جدید بودن هنوز پشتیبانی خوبی نداره.

فرض کنید که شما یک جدول دارید که میخواید در یک ردیف اون چند td قرار بدین. برای اینکار در ابتدا یک کامپوننت بنام Table میسازیم:

میبینید که در tr یک کامپوننت دیگه بنام Columns قرار دادیم که وظیفه اون قرار دادن td های مختلف هست. این کامپوننت بصورت زیر تعریف میشه:

میبینید که در متد render دو td رو در کنار یکدیگر قرار دادیم. اینکار در React قابل قبول نیست و همیشه باید یک عنصر ریشه ای وجود داشته باشه و بقیه چیزا درون اون قرار بگیرن. تا قبل از اومدن Fragment از یک div استفاده میکردیم و همه چیزای دیگه رو درون div قرار میدادیم. بصورت زیر:

با اینکار دیگه React به ما ارور نشون نمیده ولی اگر دقت کنید یک div اضافه به DOM اضافه شده و اینکه یک div رو به عنوان فرزند tr قرار بدیم در html معتبر نیست. اگر کد بالا رو اجرا کنیم و در خروجی ببینیم، Dom بصورت زیر خواهد بود:

میبینید که کد بالا معتبر نیست. پس اینجا هست که میتونیم از Fragment استفاده کنیم. بصورت زیر:

با اینکار خروجی بصورت زیر میشه:

میبینید که دیگه المنت جدید به DOM اضافه نشد و خروجی معتبر رو تولید کردیم.

سینتکس کوتاهتر

جدیدا یک سینتکس کوتاهتر برای قرار دادن Fragment منتشر شده که میتونین از اون استفاده کنید. بصورت زیر:

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

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

امیدوارم از این مطلب خوشتون اومده باشه.

Source

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

نیاز به لاگین

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