قطعه‌ها (Fragments) در React

یک الگوی رایج برای کامپوننت در React، بازگشت دادن چندین المان است. قطعه‌ها به شما اجازه می‌دهند لیستی از child ها را بدون افزودن node های اضافی به DOM به یک گروه (group) تبدیل کنید.

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

همچنین یک سینتکس کوتاه جدید برای تعریف آنها وجود دارد، ولی هنوز توسط تمام ابزارهای پرطرفدار پشتیبانی نشده است.

محرک

یک الگوی رایج برای کامپوننت، بازگشت دادن لیست از child هاست. این مثال کوچک را در نظر بگیرید:

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

<Columns /> نیاز به بازگشت دادن چندین المان <td> برای HTML رندر شده برای تایید اعتبار دارد. اگر یک والد (parent) div در داخل render() مربوط به <Columns /> استفاده شود، آنگاه HTML حاصله، معتبر خواهد بود.

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

نتیجه کد بالا در خروجی <Table /> به صورت زیر است :

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

خب ما قطعه‌ها را معرفی کردیم.

کاربرد

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

که نتیجه کد بالا در خروجی صحیح <Table /> به صورت زیر است :

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

سینتکس کوتاه

یک سینتکس جدید کوتاه‌تر وجود دارد که شما می‌توانید برای تعریف قطعه‌ها از آن استفاده کنید. این سینتکس مانند تگ‌های خالی است:

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

شما می‌توانید از <></> به همان شکلی که از هر المان دیگری استفاده می‌کردید، استفاده کنید، با این تفاوت که این المان از کلیدها و attribute ها پشتیبانی نمی‌کند.

به یاد داشته باشید که خیلی از ابزارها هنوز از آن پشتیبانی نمی‌کنند، در نتیجه ممکن است تا زمان پشتیبانی کردن ابزارها، شما بخواهید به طور صریح  <React.Fragment>  را بنویسید.

قطعه‌های کلیددار

قطعه‌هایی که با سینتکس <React.Fragment> به طور صریح تعریف شده‌اند، ممکن است کلید داشته باشند. یک مورد استفاده برای آن نگاشت یک مجموعه برای آرایه‌ای از قطعه‌هاست، برای مثال جهت ساخت لیست توصیفی:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

کلید، تنها attribute ی است که می‌تواند به قطعه منتقل شود. در آینده ممکن است ما پشتیانی‌هایی برای attribute های بیشتری مانند کنترل کننده‌های رویداد اضافه کنیم.

Live Demo

شما می‌توانید سینتکس قطعه جدید JSX را با این CodePen امتحان کنید.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit