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

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

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

ReactDOM.createPortal(child, container)

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

الاستخدام

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:المداخل (Portals) في React}}</noinclude>
+تُزوّدنا البوابات بطريقة ممتازة لتصيير المكونات الأبناء إلى عقدة DOM موجودة خارج تسلسل DOM للمكونات الآباء.<syntaxhighlight lang="javascript">
+ReactDOM.createPortal(child, container)
+</syntaxhighlight>الوسيط الأول (<code>child</code>) هو عبارة عن أي مكوّن ابن قابل للتصيير في React، مثل العناصر، والسلاسل النصية، والأجزاء (fragments). الوسيط الثاني (<code>container</code>) هو عنصر DOM.
+== الاستخدام ==
+عندما تُعيد عنصر من تابع تصيير المكوّن فبشكل اعتيادي يُوصَل إلى DOM كمكوّن ابن لأقرب عقدة أب:<syntaxhighlight lang="javascript">
+render() {
+  // تصل React عنصر div جديد وتصير الأبناء إليه
+  return (
+    <div>
+      {this.props.children}
+    </div>
+  );
+}
+</syntaxhighlight>