تعد النوافذ المنبثقة طريقة رائعة لجذب انتباه المستخدم وعرض المعلومات المهمة. يمكنك استخدامها لأشياء مثل رسائل التأكيد ورسائل الخطأ. أو يمكنك فقط استخدامها لإظهار معلومات إضافية حول عنصر ما على الصفحة.
في React ، توجد طريقتان لإنشاء النوافذ المنبثقة: استخدام خطافات React أو استخدام وحدة خارجية.
كيفية إنشاء النوافذ المنبثقة في React.js
أولاً، إنشاء تطبيق تفاعل بسيط. بعد ذلك ، يمكنك إضافة نافذة منبثقة باستخدام أي من الطريقتين. يمكنك استخدام خطافات React أو وحدة خارجية.
1. استخدام خطافات React
يعتبر أسلوب الخطافات أبسط ولا يتطلب سوى بضعة أسطر من التعليمات البرمجية.
أولاً ، تحتاج إلى إنشاء وظيفة تفتح النافذة المنبثقة. يمكنك تحديد هذه الوظيفة في المكون الذي سيعرض النافذة المنبثقة.
بعد ذلك ، تحتاج إلى استخدام الخطاف useState لإنشاء متغير حالة للنافذة المنبثقة. يمكنك استخدام متغير الحالة هذا لتحديد ما إذا كان يجب فتح النافذة المنبثقة أم لا.
أخيرًا ، تحتاج إلى إضافة زر إلى المكون الخاص بك والذي سيؤدي إلى تشغيل النافذة المنبثقة. عند النقر فوق هذا الزر ، اضبط متغير الحالة على صحيح ، مما سيؤدي إلى ظهور النافذة المنبثقة.
ألق نظرة على الكود الخاص بهذه الطريقة:
يستورد رد فعل ، {useState} من 'تتفاعل'؛وظيفةمثال() {
مقدار ثابت [isOpen، setIsOpen] = useState (خطأ شنيع);يعود (
<شعبة>
<زر onClick = {() => setIsOpen (صحيح)}>
افتح النافذة المنبثقة
</button>{مفتوح && (
<شعبة>
<شعبة>
هذا يكون محتوى النافذة المنبثقة.
</div>
<زر onClick = {() => setIsOpen (خطأ)}>
إغلاق النافذة المنبثقة
</button>
</div>
)}
</div>
);
}
يصدّرتقصير مثال؛
أولاً ، يستورد هذا الرمز الخطاف useState من مكتبة رد الفعل الأساسية. بعد ذلك ، تستخدم الدالة مثال الخطاف useState لإنشاء متغير حالة يسمى isOpen. يحدد متغير الحالة هذا ما إذا كان يجب أن تكون النافذة المنبثقة مفتوحة أم لا.
بعد ذلك ، أضف زرًا إلى المكون الذي سيؤدي إلى تشغيل النافذة المنبثقة. عند النقر فوق هذا الزر ، سيتم تعيين متغير الحالة على صحيح ، مما يؤدي إلى ظهور النافذة المنبثقة.
أخيرًا ، أضف زرًا إلى المكون الذي سيغلق النافذة المنبثقة. عند النقر فوق هذا الزر ، سيتم تعيين متغير الحالة على خطأ ، مما يؤدي إلى اختفاء النافذة المنبثقة.
2. باستخدام وحدة خارجية
يمكنك أيضًا إنشاء نوافذ منبثقة في React باستخدام وحدة خارجية. هناك العديد من الوحدات المتاحة التي يمكنك استخدامها لهذا الغرض.
وحدة واحدة شائعة هي رد الفعل النموذجي. رد الفعل النموذجي عبارة عن وحدة بسيطة وخفيفة الوزن تسمح لك بإنشاء مربعات حوار مشروطة في React.
لاستخدام نموذج رد الفعل ، تحتاج أولاً إلى تثبيته باستخدام npm:
npm ثَبَّتَ رد فعل مشروطبمجرد تثبيت رد الفعل-modal ، يمكنك استيراده إلى مكون React الخاص بك:
يستورد ReactModal من "رد فعل مشروط" ؛
يستورد رد فعل ، {useState} من 'تتفاعل'؛وظيفةمثال() {
مقدار ثابت [isOpen، setIsOpen] = useState (خطأ شنيع);يعود (
<شعبة>
<زر onClick = {setIsOpen}>فتح مشروط</button>
<ReactModal
isOpen = {isOpen}
contentLabel ="مثال مشروط"
>
هذا يكون محتوى الوسائط.
</ReactModal>
</div>
);
}
يصدّرتقصير مثال؛
في هذا الكود ، ما زلت تستخدم خطافات React ولكن مع وحدة نمطية رد فعل. باستخدام وحدة الوسائط التفاعلية ، يمكنك إضافة المزيد من الوظائف إلى النافذة المنبثقة. كما ترى ، الكود مشابه جدًا للنهج السابق. الاختلاف الوحيد هو أنك تستخدم الآن مكون ReactModal من رد الفعل النموذجي بدلاً من إنشاء مكون خاص بك.
أولاً ، يجب عليك استيراد وحدة الوسائط التفاعلية. بعد ذلك ، يمكنك استخدام مكون ReactModal لالتفاف محتوى النافذة المنبثقة. استخدم الخاصية isOpen لتحديد ما إذا كان يجب أن يكون النموذج مفتوحًا أم لا.
بمجرد إنشاء النافذة المنبثقة الخاصة بك ، قد ترغب في إضافة ميزات إضافية إليها. على سبيل المثال ، قد ترغب في إغلاق النافذة المنبثقة عندما ينقر المستخدم خارجها.
للقيام بذلك ، تحتاج إلى استخدام خاصية onRequestClose الخاصة بمكون رد الفعل. تأخذ هذه الخاصية وظيفة كقيمة لها. ستعمل هذه الوظيفة عندما ينقر المستخدم خارج النموذج.
على سبيل المثال ، لإغلاق النافذة المنبثقة عندما ينقر المستخدم خارجها ، يمكنك استخدام الكود التالي:
يستورد رد فعل ، {useState} من 'تتفاعل'؛
يستورد ReactModal من "رد فعل مشروط" ؛وظيفةمثال() {
مقدار ثابت [isOpen، setIsOpen] = useState (خطأ شنيع);يعود (
<شعبة>
<زر onClick = {() => setIsOpen (صحيح)}>
فتح مشروط
</button>
<ReactModal
isOpen = {isOpen}
contentLabel ="مثال مشروط"
onRequestClose = {() => setIsOpen (خطأ شنيع)}
>
هذا يكون محتوى الوسائط.
</ReactModal>
</div>
);
}
يصدّرتقصير مثال؛
الوظيفة التي نمررها إلى الخاصية onRequestClose تعيّن ببساطة متغير الحالة isOpen إلى false. سيؤدي هذا إلى إغلاق الوسائط.
يمكنك أيضًا إضافة خاصيات أخرى إلى مكون ReactModal لتخصيصه بشكل أكبر. للحصول على قائمة كاملة من الدعائم ، يمكنك التحقق من وثائق نموذج رد الفعل.
إضافة الأنماط في النوافذ المنبثقة
بمجرد إنشاء النافذة المنبثقة الخاصة بك ، قد ترغب في إضافة بعض التصميم إليها. هناك العديد من الطرق لتصميم مكونات React ، لكننا سنركز على الأنماط المضمنة.
الأنماط المضمنة هي أنماط يمكنك إضافتها مباشرة إلى مكون React. لإضافة أنماط مضمنة ، تحتاج إلى استخدام خاصية النمط. تأخذ هذه الخاصية الكائن باعتباره قيمته ، حيث تكون المفاتيح هي خصائص النمط والقيم هي قيم النمط.
على سبيل المثال ، لإضافة لون خلفية أبيض وعرض 500 بكسل إلى نافذة منبثقة ، يمكنك استخدام الكود التالي:
يستورد تتفاعل من 'تتفاعل'؛وظيفةمثال() {
يعود (
<نمط div = {{backgroundColor: 'أبيض'، عرض: '500 بكسل' }}>
هذا يكون محتوى النافذة المنبثقة.
</div>
);
}
يصدّرتقصير مثال؛
في هذه التعليمات البرمجية ، تقوم بإضافة خاصية النمط إلى عنصر div مع خصائص backgroundColor و width. بامكانك ايضا استخدم Tailwind CSS في تطبيق رد الفعل لتصميم النوافذ المنبثقة الخاصة بك.
زيادة معدل التحويل مع النوافذ المنبثقة
يمكن أن تساعد النوافذ المنبثقة في زيادة معدلات التحويل من خلال عرض معلومات مهمة للمستخدم. على سبيل المثال ، يمكنك استخدام نافذة منبثقة لعرض كود خصم أو عرض خاص. يمكنك أيضًا استخدام نافذة منبثقة لتجميع عناوين البريد الإلكتروني للرسائل الإخبارية الخاصة بك. تعد إضافة نافذة منبثقة إلى تطبيق React طريقة رائعة لزيادة معدلات التحويل.
يمكنك أيضًا بسهولة نشر تطبيق React مجانًا على صفحات GitHub.
