2.2 KiB
| title | localeTitle |
|---|---|
| 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>
export default MyComponent; `
`// Deconstructed import React, { Component, Fragment } from 'react';
class MyComponent extends Component { render(){ return (
export default MyComponent; `
نجح الإصدار 16.2 من React في تبسيط هذه العملية بشكل أكبر ، مما يسمح بوضع علامات JSX فارغة في شكل أجزاء:
return ( <> <div>I am an element!</div> <button>I am another element</button> </> );