كان إنشاء الوسائط وتلميحات الأدوات في React غالبًا أمرًا معقدًا ويصعب تصميمه ويؤدي إلى العديد من أخطاء التصميم.
تعمل واجهة برمجة التطبيقات createPortal على تبسيط هذه العملية مما يسمح بعرض المكونات خارج DOM الرئيسي، مما يؤدي إلى سهولة التصميم وسهولة الصيانة. سنتعلم في هذا المنشور كيفية استخدام هذه الأداة لإنشاء نماذج وتلميحات أدوات بالطريقة الصحيحة في React.

فهم واجهة برمجة تطبيقات createPortal

createPortal هي وظيفة React المضمنة التي تسمح لك بعرض المكونات في أجزاء مختلفة من DOM. وهو مفيد بشكل خاص في إنشاء: الوسائط والتراكب ومكونات الطرف الثالث وعناصر واجهة المستخدم المخصصة.

كيف يعمل

يتم استخدام بوابة داخل بيان الإرجاع للمكون وهي تغير فقط الموضع الفعلي لعقدة DOM. إنه مثل نقل عقدة DOM خارج شجرة DOM الرئيسية. تصل واجهة برمجة تطبيقات createPortal إلى معلمتين والثالثة اختيارية:

• الأطفال: أي شيء يمكن تصييره باستخدام React أو div أو المكون أو جزء React.
• domNode: وهو موقع الأطفال المراد وضعهم.
• مفتاح (اختياري): رقم فريد أو سلسلة لاستخدامها كمفتاح للبوابة.

إذا افترضنا أننا قمنا بإنشاء بوابة في المكون A وعرضها في المكون B، فسيقوم أبناء البوابة الإلكترونية بالوصول إلى كل حالة ومتغير المكون A وسيعملون كما هو الحال في المكون A أثناء عرضه في المكون ب.

إنشاء واستخدام البوابة

في المثال أدناه، يتم استخدام البوابة الإلكترونية لنقل المكون الطفل الذي يقبل الحالة ونقل هذا المكون إلى الجسم.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

الآن سيتم عرض المكون الفرعي في علامات النص بتنسيق HTML.

خاتمة

createPortal هي أداة قيمة في React لإنشاء الوسائط وتلميحات الأدوات والمكونات الأخرى التي يجب عرضها خارج شجرة DOM الرئيسية. باستخدام هذه الأداة، يمكنك تحقيق نهج أنظف وأكثر مرونة وأكثر كفاءة لهذه العناصر.