تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۶ اردیبهشت ۱۳۹۷

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

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

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

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

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

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

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

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

class Columns extends React.Component {
  render() {
    return (
      <td>Hello</td>
      <td>World</td>
    );
  }
}

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

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

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

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

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

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

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

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

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

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

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

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

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

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

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

Source

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

نظرات کاربران

نیما

عالیه و کامل بود

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