freeCodeCamp/guide/arabic/react/fragments/index.md

title, localeTitle

title	localeTitle
Fragments	الشظايا

الشظايا Fragments

الشظايا هي طريقة لعرض عناصر متعددة دون استخدام عنصر محيط. عند محاولة تقديم عناصر بدون عنصر محيطة في JSX ، سترى رسالة الخطأ Adjacent JSX elements must be wrapped in an enclosing tag . وذلك لأنه عندما يقوم JSX بالتحويل ، فإنه ينشئ عناصر تحمل أسماء علاماتها المقابلة ، ولا يعرف اسم العلامة التي يجب استخدامها إذا تم العثور على عناصر متعددة. في الماضي ، كان الحل المتكرر لهذا هو استخدام div diver لحل هذه المشكلة. ومع ذلك ، جلب الإصدار 16 من React إضافة Fragment ، مما يجعل هذا ليس ضروريًا.

تعمل Fragment جزءًا بدون إضافة أقسام غير ضرورية إلى DOM. يمكنك استخدامه مباشرة من استيراد React أو تفكيكه:

import React from 'react';

class MyComponent extends React.Component {
  render(){
    return (
      <React.Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </React.Fragment>
    );
  }
}

export default MyComponent;

// Deconstructed
import React, { Component, Fragment } from 'react';

class MyComponent extends Component {
  render(){
    return (
      <Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </Fragment>
    );
  }
}

export default MyComponent;

نجح الإصدار 16.2 من React في تبسيط هذه العملية بشكل أكبر ، مما يسمح بوضع علامات JSX فارغة في شكل أجزاء:

return (
  <>
    <div>I am an element!</div>
    <button>I am another element</button>
  </>
);

معلومات اكثر:

• React.Fragment (الوثائق الرسمية)
• React v16.2.0: تحسين الدعم للشظايا