الفرق بين المراجعتين لصفحة: «React/portals»

مراجعة 09:49، 19 أغسطس 2018

تُزوّدنا المداخل بطريقة ممتازة لتصيير المكونات الأبناء إلى عقدة DOM موجودة خارج تسلسل DOM للمكونات الآباء.

ReactDOM.createPortal(child, container)

الوسيط الأول (child) هو عبارة عن أي مكوّن ابن قابل للتصيير في React، مثل العناصر، والسلاسل النصية، والأجزاء (fragments). الوسيط الثاني (container) هو عنصر DOM.

الاستخدام

عندما تُعيد عنصر من تابع تصيير المكوّن فبشكل اعتيادي يُوصَل إلى DOM كمكوّن ابن لأقرب عقدة أب:

render() {
  // تصل React عنصر div جديد وتصير الأبناء إليه
  return (
    <div>
      {this.props.children}
    </div>
  );
}

ولكن من المفيد أحيانًا إدخال الابن في مواقع متعددة من DOM:

render() {
  // لا تنشئ React عنصر div جديد، فهي تصير الأبناء إلى domNode
  // domNode هي اي عقدة DOM صحيحة بغض النظر عن موقعها في DOM
  
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

الحالة النموذجية لاستخدام المداخل هي عندما يمتلك المكوّن الأب التنسيق overflow: hidden أو z-index ولكنك تريد من المكوّن الابن أن يظهر خارج حاويته، على سبيل المثال مربعات الحوار (dialogs) وتلميحات الأدوات (tooltips).

ملاحظة: تذكر عند التعامل مع المداخل أنّ إدارة تركيز لوحة المفاتيح تصبح أمرًا هامًّا.

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

جرب المثال على CodePen.

تضخيم الأحداث عن طريق المداخل

بالرغم من أن المداخل يُمكِن لها أن تكون في أي مكان من شجرة DOM، فهي تتصرف مثل عناصر React الأبناء في كل طريقة أخرى. تعمل ميزات مثل السياق بنفس الطريقة بالضبط بغض النظر إن كان العنصر الابن مدخل أم لا، لأنّ المدخل يبقى موجودًا في شجرة React بغض النظر عن موقعه في شجرة DOM.

يتضمّن ذلك تضخيم الأحداث (event bubbling)، حيث أنّ الحدث الذي أُطلِق بداخل المدخل سيتصاعد إلى العناصر الأسلاف في شجرة React حتى ولو لم تكن هذه العناصر أسلافًا في شجرة DOM. بافتراض بنية HTML التالية:

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

سيكون المكوّن الأب Parent في ‎#app-root‎ قادرًا على الإمساك بالحدث المُضاعَف من العقدة الشقيقة له وهي ‎#modal-root‎.