تتكون قائمة التنقل في الشريط الجانبي عادةً من قائمة عمودية من الروابط. يمكنك إنشاء مجموعة من الروابط في React باستخدام رد فعل جهاز التوجيه dom.
اتبع هذه الخطوات لإنشاء قائمة تنقل جانبية لـ React مع روابط تحتوي على رموز واجهة المستخدم المادية. ستعرض الروابط صفحات مختلفة عند النقر فوقها.
إنشاء تطبيق React
إذا كان لديك بالفعل ملف مشروع React، لا تتردد في التخطي إلى الخطوة التالية.
يمكنك استخدام الأمر create-reaction-app لبدء استخدام React وتشغيله بسرعة. يقوم بتثبيت جميع التبعيات والتكوين من أجلك.
قم بتشغيل الأمر التالي لإنشاء مشروع React يسمى رد فعل-sidenav.
npx خلقرد فعل التطبيق رد فعل sidenav
سيؤدي هذا إلى إنشاء مجلد رد فعل-sidenav مع بعض الملفات لتبدأ. لتنظيف هذا المجلد قليلاً ، انتقل إلى المجلد src واستبدل محتويات App.js بهذا:
يستورد './App.css';وظيفةتطبيق() {
إرجاع (
<div className ="تطبيق"></div>
);
}
يصدّرإفتراضي تطبيق؛
إنشاء مكون التنقل
سيبدو مكون التنقل الذي ستقوم بإنشائه كما يلي:
الأمر بسيط جدًا ، ولكن بمجرد الانتهاء ، يجب أن تكون قادرًا على تعديله ليناسب احتياجاتك. يمكنك طي مكون التنقل باستخدام رمز السهم المزدوج في الأعلى:
ابدأ بإنشاء العرض غير المطوي. بصرف النظر عن رمز السهم ، يحتوي الشريط الجانبي على قائمة بالعناصر. يحتوي كل عنصر من هذه العناصر على رمز وبعض النصوص. بدلاً من إنشاء عنصر بشكل متكرر لكل عنصر ، يمكنك تخزين البيانات لكل عنصر في مصفوفة ثم تكرارها باستخدام وظيفة الخريطة.
للتوضيح ، قم بإنشاء مجلد جديد يسمى lib وإضافة ملف جديد يسمى navData.js.
يستورد الرئيسية من "@ mui / icons-material / الصفحة الرئيسية" ؛
يستورد TravelExploreIcon من "@ mui / icons-material / TravelExplore" ؛
يستورد BarChartIcon من "@ mui / icons-material / BarChart" ؛
يستورد الإعدادات من "@ mui / icons-material / الإعدادات" ؛
يصدّرمقدار ثابت navData = [
{
المعرف: 0 ،
أيقونة: <الرئيسية>,
نص: "مسكن",
حلقة الوصل: "/"
},
{
المعرف: 1 ،
أيقونة: <TravelExploreIcon />,
نص: "يكتشف",
حلقة الوصل: "يكتشف"
},
{
المعرف: 2 ،
أيقونة: <BarChartIcon />,
نص: "إحصائيات",
حلقة الوصل: "الإحصاء"
},
{
المعرف: 3 ،
أيقونة: <رمز الإعدادات />,
نص: "إعدادات",
حلقة الوصل: "الإعدادات"
}
]
الرموز المستخدمة أعلاه مأخوذة من مكتبة Material UI ، لذا قم بتثبيتها أولاً باستخدام هذا الأمر:
تثبيت npm mui/material @المشاعر/react @المشاعر/styled
تثبيت npm mui/icons-material
بعد ذلك ، قم بإنشاء مجلد يسمى عناصر وإضافة مكون جديد يسمى Sidenav.js.
في هذا الملف ، قم باستيراد navData من ../lib وأنشئ الهيكل العظمي لملف Sidenav وظيفة:
// في Sidenav.js
يستورد {navData} من "../lib/navData" ؛
يصدّرإفتراضيوظيفةSidenav() {
إرجاع (
<شعبة>
</div>
)
}
لإنشاء الروابط ، قم بتعديل عنصر div في هذا المكون إلى هذا:
<شعبة>
<زر className = {styles.menuBtn}>
<لوحة المفاتيح DoubleArrowLeftIcon />
</button>
{navData.map (item =>{
إرجاع <مفتاح div = {item.id} className = {styles.sideitem}>
{item.icon}
<تمتد className = {styles.linkText}>{item.text}</span>
</div>
})}
</div>يقوم هذا المكون بإنشاء ارتباط تنقل يحتوي على الرمز ونص الارتباط لكل تكرار في وظيفة الخريطة.
يحتوي عنصر الزر على رمز السهم الأيسر من مكتبة Material UI. قم باستيراده في الجزء العلوي من المكون باستخدام هذا الرمز.
يستورد لوحة المفاتيح DoubleArrowLeftIcon من "@ mui / icons-material / KeyboardDoubleArrowLeft" ؛
ربما لاحظت أيضًا أن أسماء الفئات تشير إلى كائن أنماط. هذا لأن هذا البرنامج التعليمي يستخدم وحدات CSS. تسمح لك وحدات CSS النمطية بإنشاء أنماط محددة النطاق محليًا في React. لا تحتاج إلى تثبيت أو تكوين أي شيء إذا كنت تستخدم تطبيق create-response-app لبدء هذا المشروع.
في مجلد المكونات ، قم بإنشاء ملف جديد يسمى sidenav.module.css وأضف ما يلي:
.sidenav {
العرض: 250 بكسل ؛
انتقال: العرض 0.3 ثانيةسهولة في الخروج;
الارتفاع: 100 فولت
لون الخلفية: RGB (10،25،41) ؛
أعلى الحشو: 28 بكسل ؛
}مغلق {
يتألف: سيدناف.
انتقال: العرض 0.3 ثانيةسهولة في الخروج;
العرض: 60 بكسل
}.sideitem {
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
الحشو: 10 بكسل 20 بكسل ؛
المؤشر: المؤشر.
اللون: # B2BAC2 ؛
زخرفة النص: لا شيء ؛
}. linkText {
المساحة المتروكة: 16 بكسل ؛
}. linkText مغلق {
يؤلف: linkText ؛
الرؤية: مخفية
}.sideitem:يحوم {
لون الخلفية: # 244f7d1c ؛
}
.menuBtn {
محاذاة-الذات: المركز؛
محاذاة النفس: مرن-بداية;
تبرير الذات: مرن-نهاية;
اللون: # B2BAC2 ؛
لون الخلفية: شفاف.
الحدود: لا شيء ؛
المؤشر: المؤشر.
المساحة المتروكة: 20 بكسل ؛
}
إعداد جهاز التوجيه React
يجب أن تكون عناصر div التي يتم إرجاعها بواسطة وظيفة الخريطة روابط. في React ، يمكنك إنشاء روابط ومسارات باستخدام React-router-dom.
في الجهاز ، قم بتثبيت React-router-dom عبر npm.
npm تثبيت رد فعل جهاز التوجيه dom@آخر
يقوم هذا الأمر بتثبيت أحدث إصدار من React-router-dom.
في Index.js ، قم بلف مكون التطبيق بالموجه.
يستورد تتفاعل من 'تتفاعل'؛
يستورد رد فعل من "رد فعل دوم / العميل" ؛
يستورد تطبيق من './تطبيق'؛
يستورد {BrowserRouter} من "رد فعل جهاز التوجيه دوم" ؛
مقدار ثابت الجذر = ReactDOM.createRoot (وثيقة.getElementById ('root')) ؛
جذر.يجعل(
<تتفاعل. الوضع الصارم>
<المستعرض>
<تطبيق />
</BrowserRouter>
</React.StrictMode>
);
بعد ذلك ، في App.js ، أضف مساراتك.
يستورد {
المستعرض
طرق ،
طريق،
} من "رد فعل جهاز التوجيه دوم";يستورد './App.css';
يستورد Sidenav من "./Components/Sidenav" ؛
يستورد يكتشف من "./Pages/Explore" ؛
يستورد مسكن من "./Pages/Home" ؛
يستورد إعدادات من "./Pages/Settings" ؛
يستورد إحصائيات من "./Pages/Statistics" ؛
وظيفةتطبيق() {
إرجاع (
<div className ="تطبيق">
<Sidenav />
<رئيسي>
<طرق>
<مسار المسار ="/" العنصر = {<مسكن />}/>
<مسار المسار ="/explore" العنصر = {<يكتشف />} />
<مسار المسار ="/statistics" العنصر = {<إحصائيات />}/>
<مسار المسار ="/settings" العنصر = {<إعدادات />} />
</Routes>
</main>
</div>
);
}
يصدّرإفتراضي تطبيق؛
قم بتعديل App.css بهذه الأنماط.
هيئة {
الهامش: 0؛
حشوة: 0 ؛
}.تطبيق {
عرض: فليكس ؛
}
رئيسي {
الحشو: 10 بكسل ؛
}
يقوم كل مسار بإرجاع صفحة مختلفة بناءً على عنوان URL الذي تم تمريره إلى ملف الدعائم المسار. أنشئ مجلدًا جديدًا يسمى Pages وأضف أربعة مكونات - الصفحة الرئيسية ، والاستكشاف ، والإحصاءات ، والإعدادات الصفحة. هنا مثال:
يصدّرإفتراضيوظيفةمسكن() {
إرجاع (
<شعبة>مسكن</div>
)
}
إذا قمت بزيارة / مسار المنزل ، يجب أن ترى "الصفحة الرئيسية".
يجب أن تؤدي الروابط الموجودة في الشريط الجانبي إلى الصفحة المطابقة عند النقر فوقها. في Sidenav.js ، قم بتعديل وظيفة الخريطة لاستخدام مكون NavLink من رد فعل جهاز التوجيه dom بدلاً من عنصر div.
{navData.map (item => {
إرجاع <مفتاح NavLink = {item.id} className = {styles.sideitem} إلى = {item.link}>
{item.icon}
<تمتد className = {styles.linkText}>{item.text}</span>
</NavLink>
})}
تذكر استيراد NavLink أعلى الملف.
يستورد {NavLink} من "رد فعل جهاز التوجيه دوم" ؛
تستقبل NavLink مسار URL للارتباط من خلال الخاصية to.
حتى هذه النقطة ، يكون شريط التنقل مفتوحًا. لجعله قابلاً للطي ، يمكنك تبديل عرضه عن طريق تغيير فئة CSS عندما ينقر المستخدم على زر السهم. يمكنك بعد ذلك تغيير فئة CSS مرة أخرى لفتحها.
لتحقيق وظيفة التبديل هذه ، يجب أن تعرف متى يكون الشريط الجانبي مفتوحًا ومغلقًا.
لهذا ، استخدم خطاف useState. هذه رد فعل هوك يسمح لك بإضافة وتتبع الحالة في مكون وظيفي.
في sideNav.js ، أنشئ الخطاف للحالة المفتوحة.
مقدار ثابت [open، setopen] = useState (حقيقي)
قم بتهيئة الحالة المفتوحة إلى true ، بحيث يكون الشريط الجانبي مفتوحًا دائمًا عند بدء التطبيق.
بعد ذلك ، قم بإنشاء الوظيفة التي من شأنها تبديل هذه الحالة.
مقدار ثابت toggleOpen = () => {
setopen (! open)
}
يمكنك الآن استخدام القيمة المفتوحة لإنشاء فئات CSS ديناميكية مثل هذا:
<div className = {open؟ style.sidenav: styles.sidenavClosed}>
<زر className = {styles.menuBtn} onClick = {toggleOpen}>
{افتح؟ <لوحة المفاتيح DoubleArrowLeftIcon />: <لوحة المفاتيح DoubleArrowRightIcon />}
</button>
{navData.map (item =>{
إرجاع <مفتاح NavLink = {item.id} className = {styles.sideitem} إلى = {item.link}>
{item.icon}
<تمتد className = {فتح؟ style.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
سيتم تحديد أسماء فئات CSS المستخدمة من خلال الحالة المفتوحة. على سبيل المثال ، إذا كان open هو true ، فسيكون لعنصر div الخارجي اسم فئة sidenav. خلاف ذلك ، سيتم إغلاق الفصل sidenav.
هذا هو نفسه بالنسبة للرمز ، الذي يتغير إلى رمز السهم الأيمن عند إغلاق الشريط الجانبي.
تذكر أن تقوم باستيراده.
يستورد لوحة المفاتيح DoubleArrowRightIcon من "@ mui / icons-material / KeyboardDoubleArrowRight" ؛
مكون الشريط الجانبي قابل للطي الآن.
احصل على الكود الكامل من هذا مستودع جيثب وجربها بنفسك.
مكونات أسلوب رد الفعل
تجعل React من السهل إنشاء مكون تنقل قابل للطي. يمكنك استخدام بعض الأدوات التي توفرها React مثل رد فعل جهاز التوجيه دوم للتعامل مع التوجيه والخطافات لتتبع الحالة المنهارة.
يمكنك أيضًا استخدام وحدات CSS النمطية لتصميم المكونات ، على الرغم من أنك لست مضطرًا لذلك. استخدمها لإنشاء فئات محددة النطاق محليًا فريدة والتي يمكنك التخلص منها من ملفات الحزمة إذا لم تكن قيد الاستخدام.
