React Fragment در ری اکت

در ری اکت جایی که ما می خواهیم چیزی را بر روی صفحه نمایش render کنیم،نیاز داریم تا از متد ()render درون کامپوننت استفاده کنیم.متد ()render می تواند یک عنصر و یا چندین عنصر را برای ما برگرداند.اگر ما بخواهیم چندین عنصر برگردانیم،متد ()render نیاز دارد به یک تگ div تا همه ی عناصر مربوطه را درون آن قرار دهد.

این تگ اضافه گاهی اوقات منجر به بهم ریختن قالب html ما می شود و همچنین مورد علاقه ی بسیاری از توسعه دهنده ها نیست.

مثال:

// Rendering with div tag  
class App extends React.Component {   
     render() {    
      return (   
         //Extraneous div element   
         <div>  
           <h2> Hello World! </h2>   
           <p> Welcome to the Laraman. </p>   
         </div>   
      );   
     }   
}

برای حل این مشکل ری اکت Fragments ها را معرفی کرد که از ورژن ۱۶.۲ و بالاتر مورد استفاده قرار می گیرد.

Fragment ها به ما اجازه می دهد تا گروهی از عناصر را بدون اضافه کردن گره ی اضافی در DOM داشته باشیم.

سینتکس

<React.Fragment>  
    <h2> child1 </h2>   
    <p> child2 </p>   
      .. ..... .... ...  
</React.Fragment>

مثال:

// Rendering with fragments tag  
class App extends React.Component {   
    render() {   
     return (   
       <React.Fragment>  
          <h2> Hello World! </h2>   
          <p> Welcome to the Laraman. </p>   
       </React.Fragment>  
     );   
    }   
}

چرا از Fragments ها استفاده می کنیم؟

دو دلیل اصلی که ما از تگ Fragmentsاستفاده می کنیم:

۱-آن باعث می شود اجرای کد در مقایسه با تگ div سریعتر انجام شود.

۲-آن حافظه ی کمتری را اشغال می کند.

سینتکس کوتاه شده ی Fragments

روش جدیدی برای اعلان Fragments ها در متد بالا وجود دارد.آن شبیه به یک تگ خالی است که ما می توانیم از '<>' به جای <React.Fragment> استفاده کنیم.

مثال:

//Rendering with short syntax   
class Columns extends React.Component {   
  render() {   
    return (   
      <>    
        <h2> Hello World! </h2>   
        <p> Welcome to the Laraman </p>   
      </>   
    );   
  }   
}

Fragments اصلی

عبارت کوتاه شده ی Fragments صفت key را نمی پذیرد.ما برای map کردن مجموعه ی آرایه ها به یک key نیاز داریم.

اگر ما به key ها نیاز داریم،ما باید از سینتکس <React.Fragment> استفاده کنیم.

نکته: Key ها تنها attribute ی است که ما می توانیم با Fragments ها ارسال کنیم.

مثال:

Function  = (props) {  
  return (  
    <Fragment>  
      {props.items.data.map(item => (  
        // Without the 'key', React will give a key warning  
        <React.Fragment key={item.id}>  
          <h2>{item.name}</h2>  
          <p>{item.url}</p>  
          <p>{item.description}</p>  
        </React.Fragment>  
      ))}  
    </Fragment>  
  )  
}