الفرق بين المراجعتين ل"React/portals"
< React
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المداخل (Portals) في React}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المداخل (Portals) في React}}</noinclude> | <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> | ||
مراجعة 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>
);
}