كيفية إنشاء قائمة منسدلة في React باستخدام Tailwind CSS باستخدام useReducer وuseRef

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

مقدمة

في تطوير الويب الحديث، تعد إدارة واجهات المستخدم بكفاءة أمرًا بالغ الأهمية. توفر React، جنبًا إلى جنب مع Tailwind CSS، مجموعة أدوات قوية لإنشاء مكونات سريعة الاستجابة. سنتعلم كيفية التعامل مع وظيفة القائمة المنسدلة في React، مع التأكد من أن النقر خارج القائمة المنسدلة سيؤدي إلى إغلاقها، مع الحفاظ على القدرة على فتح أو إغلاق كل قائمة منسدلة بشكل مستقل.

ما هي useReducer وuseRef؟

قبل الغوص في الكود، دعونا نفهم خطافتي React اللتين سنستخدمهما:

• useReducer: هذا الخطاف هو بديل لـ useState لإدارة الحالة في المكونات الوظيفية. إنه مفيد بشكل خاص لإدارة منطق الحالة المعقد ومتغيرات الحالة المتعددة. يأخذ الخطاف useReducer وظيفة مخفض وحالة أولية، ويعيد الحالة الحالية ووظيفة إرسال لتحديث تلك الحالة.

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

التنفيذ خطوة بخطوة

الخطوة 1: إعداد المشروع

أولاً، تأكد من إعداد مشروع React باستخدام Tailwind CSS. إذا لم يكن لديك واحدًا، فيمكنك إنشائه باستخدام تطبيق إنشاء React:

npx create-react-app my-dropdown-app
cd my-dropdown-app
npm install tailwindcss
npx tailwindcss init

قم بتكوين Tailwind عن طريق إضافة الأسطر التالية إلى tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

بعد ذلك، قم بإضافة توجيهات Tailwind إلى ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ملف ارتباط بـبببببببببببببببببببببببببببببببببببببببب الموجودة

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;