Ba'zan veb-ilovalaringiz voqea muvaffaqiyatli yoki yo'qligini ko'rsatish uchun qandaydir bildirishnomalarni ko'rsatishini xohlaysiz. Men shaxsan server qo'ng'irog'i paytida xatolik yuz bergan bo'lsa, ba'zi xabarlarni ko'rsatish uchun foydalanaman. Agar kutilmagan voqea yuz bergan bo'lsa, foydalanuvchiga fikr bildirish har doim yaxshi.

Ushbu qo'llanmada biz tashqi resurslardan foydalanmasdan to'liq moslashtirilgan va qayta foydalanish mumkin bo'lgan snackbar komponentini yaratamiz va loyihalashtiramiz.

Biz quyidagi amallarni bajaramiz:
1. Yangi reaksiya ilovasini yaratish.
2. Snackbar komponentimizni yaratish va loyihalash.
3. Snackbarni ko‘rsatish uchun hodisani ishga tushirish tugmasi.

Yangi reaksiya ilovasini yaratish

Quyidagi buyruq yordamida snackbar nomi bilan yangi reaksiya loyihasini yaratamiz:

npx create-react-app snackbar

npm start yordamida yaratilgan ilovani ishga tushiramiz va brauzeringizni oching va “http://localhost:3000” ga oʻtamiz. Siz reaktsiyaning standart ilovasini ko'rasiz.

Keling, snackbar komponentimizni yaratib, qo'llarimizni iflos qilish uchun oldinga boraylik.

Snackbar komponentimizni yaratish va loyihalash

Sevimli IDElaringizdan birida yangi yaratilgan snackbar loyihasini oching. Mening holimda bu vizual studiya kodi.
Loyihangiz ichida src jildiga oʻting va uning ichida ikkita snackbar.js va snackbar.module.css faylini yarating.

Avval snackbar.module.css da snackbar uchun CSS-ni tezda yozamiz. module.css CSS moduliga ishora qiladi, ya'ni barcha CSS sinflari va animatsiyalari mahalliy miqyosda. Bu haqda ko'proq ma'lumotni "https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet" sahifasidan olishingiz mumkin.

Dizayn qismiga qaytsak, quyida uning kod qismi keltirilgan.

  • .snackbar - bu Snackbar uchun asosiy CSS klassi bo'lib, dastlab yashirin.
  • .snackbar.show klassi Snackbarni ko'rinadigan va o'chadigan effekt bilan ko'rsatadi.

Endi snackbar komponentini yaratamiz.
Quyida uning kod qismi keltirilgan.

Ushbu komponent uchta asosiy qismdan iborat

  • isActive: Snackbars ko'rinishini boshqaradigan holat. Agar bu toʻgʻri boʻlsa, komponentda .snackbar.show ning CSS sinfi mavjud boʻlib, bu uni oʻchirish effekti bilan koʻrinadi va isActive notoʻgʻri boʻlsa, komponentda komponentni koʻrinmas yoki yashirin qiladigan .snackbar CSS klassi mavjud.
  • openSnackbar: bu isActive holatini boshqaruvchi funksiya. Ushbu funktsiya bajarilganda isActive rost bo'ladi, shuning uchun Snackbar 3 soniya vaqt oralig'ida ko'rinadi, shundan so'ng isActive noto'g'ri bo'ladi. openSnackbar funktsiyasi xabarni Snackbarda ko'rsatishni ham o'rnatadi.
  • xabar: bu snackbarda ko'rsatiladigan xabar

Nima uchun xabar davlat emas, deb hayron bo'lishingiz mumkin. Javob oddiy, chunki biz Snackbar komponentimiz xabarni o'zgartirganda, balki isActive o'zgarishida qayta ko'rsatilishini xohlamaymiz.

Shunday qilib, endi yuqoridan aniq ko'rishingiz mumkinki, reaktsiya ilovangizda Snackbar yoki qalqib chiquvchi bildirishnoma bo'lishi uchun siz shunchaki openSnackbar-ni ishga tushirishingiz kerak.

Endi oddiy namoyish qilish uchun uni bajarish tugmachasini yarataylik.

Snackbarni koʻrsatish uchun tadbirni ishga tushirish tugmasi

Buni soddalashtirish uchun App.js fayliga quyidagi tugmachani qo'shdim,

Ko'rib turganingizdek, men Snackbar komponentini import qildim va qaytishning istalgan joyiga joylashtirdim. Shunday qilib, bizning keyingi maqsadimiz Snackbar komponentining openSnackbar funksiyasini bajarishdir. Buning uchun biz ref'lardan foydalanamiz. Biz snackbarRef = React.createRef() yordamida ref yaratamiz va yaratilgan snackbarRefni Snackbar ref ga <Snackbar ref = {this.snackbarRef} /> sifatida o'tkazamiz
Siz men oddiy tugma yaratganimni va uni bosish orqali openSnackbarni bajarganimni ko'rishingiz mumkin. Siz o'zingizning xabaringiz yoki xato xabaringiz yoki xohlagan narsani qo'shishingiz mumkin. Bu holda, tugmani bosish quyidagi kabi ko'rinadi,

Buni siz qildingiz. Bu shunchalik oddiy. Endi siz ushbu komponentni loyihangizning istalgan joyida ishlatishingiz mumkin. Juda oddiy, ammo juda kuchli xususiyat.

Bu "https://github.com/Kroniac/react_snackbar" Snackbar github repo havolasi.

Ushbu o'quv qo'llanma siz uchun foydali bo'lganmi va qaysi holatda foydalandingiz, menga xabar bering.