React Portallarida Hodisalarni Tutib Olish: Portallararo Hodisalarni Usib Qolish

React Portallari bolalik komponentlarni ota-ona komponentning DOM ierarxiyasidan tashqarida mavjud bo'lgan DOM tuguniga render qilish uchun kuchli mexanizmni taklif qiladi. Bu, ayniqsa, o'z ota-ona konteynerlari chegarasidan chiqib ketishi kerak bo'lgan modallar, maslahatlar va boshqa UI elementlari uchun foydalidir. Biroq, bu hodisalar bilan ishlashda, ayniqsa portal ichida paydo bo'lgan, lekin undan tashqaridagi elementlarga mo'ljallangan hodisalarni ushlab qolish yoki tutib olish kerak bo'lganda, murakkabliklarni keltirib chiqaradi. Ushbu maqola ushbu murakkabliklarni o'rganadi va portallararo hodisalarni ushlab qolishga erishish uchun amaliy yechimlarni taqdim etadi.

React Portallarini Tushunish

Hodisalarni tutib olishga kirishishdan oldin, keling, React Portallarini puxta tushunib olaylik. Portal bolalik komponentni DOMning boshqa bir qismiga render qilishga imkon beradi. Tasavvur qiling, sizda chuqur joylashgan komponent bor va modalni to'g'ridan-to'g'ri `body` elementi ostiga render qilmoqchisiz. Portal bo'lmasa, modal o'z ajdodlarining uslublari va joylashuviga bo'ysunadi, bu esa joylashuv bilan bog'liq muammolarga olib kelishi mumkin. Portal bu muammoni chetlab o'tib, modalni to'g'ridan-to'g'ri siz xohlagan joyga joylashtiradi.

Portal yaratish uchun asosiy sintaksis quyidagicha:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Bu yerda, `child` - siz render qilmoqchi bo'lgan React elementi (yoki komponenti), `domNode` esa uni render qilmoqchi bo'lgan DOM tugunidir.

Misol:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // modal-root mavjud bo'lmagan holatni boshqarish

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

Ushbu misolda `Modal` komponenti o'z bolalarini `modal-root` ID'siga ega DOM tuguniga render qiladi. `.modal-overlay` dagi `onClick` ishlovchisi kontentdan tashqarida bosilganda modalni yopishga imkon beradi, `e.stopPropagation()` esa kontent bosilganda overlay bosilishi modalni yopishining oldini oladi.

Portallararo Hodisalarni Boshqarishning Qiyinchiliklari

Portallar joylashuv muammolarini hal qilsa-da, ular hodisalar bilan ishlashda qiyinchiliklarni keltirib chiqaradi. Xususan, DOMdagi standart hodisalarning yuqoriga chiqish mexanizmi hodisalar portal ichida paydo bo'lganda kutilmagan tarzda ishlashi mumkin.

Stsenariy: Tasavvur qiling, sizda portal ichida tugma bor va siz React daraxtida yuqoriroqda joylashgan (lekin portalning render joyidan *tashqarida* bo'lgan) komponentdan ushbu tugma bosilishini kuzatmoqchisiz. Portal DOM ierarxiyasini buzganligi sababli, hodisa React daraxtidagi kutilgan ota-ona komponentiga yuqoriga chiqmasligi mumkin.

Asosiy muammolar:

• Hodisalarning yuqoriga chiqishi: Hodisalar DOM daraxti bo'ylab yuqoriga tarqaladi, lekin portal ushbu daraxtda uzilish hosil qiladi. Hodisa portalning manzil tuguni *ichidagi* DOM ierarxiyasi bo'ylab yuqoriga chiqadi, lekin portalni yaratgan React komponentiga qaytib chiqishi shart emas.
• `stopPropagation()`: Ko'p hollarda foydali bo'lsa-da, `stopPropagation()` ni o'ylamasdan ishlatish hodisalarning kerakli tinglovchilarga, jumladan, portaldan tashqaridagilarga yetib borishiga to'sqinlik qilishi mumkin.
• Hodisa Maqsadi: `event.target` xususiyati hali ham hodisa paydo bo'lgan DOM elementiga ishora qiladi, hatto u element portal ichida bo'lsa ham.

Portallararo Hodisalarni Ushlab Qolish Strategiyalari

Portallar ichida paydo bo'ladigan va ulardan tashqaridagi komponentlarga yetib boradigan hodisalarni boshqarish uchun bir nechta strategiyalarni qo'llash mumkin:

1. Hodisalarni Delegatsiya Qilish

Hodisalarni delegatsiya qilish ota-ona elementga (ko'pincha hujjat yoki umumiy ajdodga) bitta hodisa tinglovchisini biriktirishni va keyin hodisaning haqiqiy maqsadini aniqlashni o'z ichiga oladi. Bu yondashuv alohida elementlarga ko'plab hodisa tinglovchilarini biriktirishdan qochadi, bu esa samaradorlikni oshiradi va hodisalarni boshqarishni soddalashtiradi.

Qanday ishlaydi:

1. Umumiy ajdodga (masalan, `document.body`) hodisa tinglovchisini biriktiring.
2. Hodisa tinglovchisida, hodisani keltirib chiqargan elementni aniqlash uchun `event.target` xususiyatini tekshiring.
3. Hodisa maqsadiga qarab kerakli harakatni bajaring.

Misol:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Bosilgan tugmaga asoslangan amallarni bajaring
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

Ushbu misolda `PortalAwareComponent` `document.body` ga bosish hodisasi tinglovchisini biriktiradi. Tinglovchi bosilgan element `portal-button` sinfiga ega yoki yo'qligini tekshiradi. Agar ega bo'lsa, u konsolga xabar chiqaradi va boshqa kerakli amallarni bajaradi. Bu yondashuv tugma portal ichida yoki tashqarisida bo'lishidan qat'i nazar ishlaydi.

Afzalliklari:

• Samaradorlik: Hodisa tinglovchilari sonini kamaytiradi.
• Soddalik: Hodisalarni boshqarish mantig'ini markazlashtiradi.
• Moslashuvchanlik: Dinamik ravishda qo'shilgan elementlardan keladigan hodisalarni osonlikcha boshqaradi.

E'tiborga olinadigan jihatlar:

• Aniqlik: `event.target` yordamida hodisa manbalarini diqqat bilan nishonga olishni va `event.target.closest()` yordamida DOM daraxti bo'ylab yuqoriga qarab harakatlanishni talab qiladi.
• Hodisa turi: Yuqoriga chiqadigan hodisalar uchun eng mos keladi.

2. Maxsus Hodisalarni Yuborish

Maxsus hodisalar dasturiy ravishda hodisalar yaratish va yuborish imkonini beradi. Bu React daraxtida to'g'ridan-to'g'ri bog'lanmagan komponentlar o'rtasida aloqa o'rnatish yoki maxsus mantiq asosida hodisalarni ishga tushirish kerak bo'lganda foydalidir.

Qanday ishlaydi:

1. `Event` konstruktoridan foydalanib yangi `Event` obyektini yarating.
2. DOM elementida `dispatchEvent` usulidan foydalanib hodisani yuboring.
3. `addEventListener` yordamida maxsus hodisani tinglang.

Misol:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

Ushbu misolda, portal ichidagi tugma bosilganda, `document` da `portalButtonClick` nomli maxsus hodisa yuboriladi. `PortalAwareComponent` ushbu hodisani tinglaydi va xabarni konsolga chiqaradi.

Afzalliklari:

• Moslashuvchanlik: Komponentlarning React daraxtidagi joylashuvidan qat'i nazar, ular o'rtasida aloqaga imkon beradi.
• Moslashtirish imkoniyati: Hodisaning `detail` xususiyatiga maxsus ma'lumotlarni kiritishingiz mumkin.
• Bog'liqlikni kamaytirish: Komponentlar o'rtasidagi bog'liqliklarni kamaytiradi.

E'tiborga olinadigan jihatlar:

• Hodisa nomlash: Ziddiyatlarni oldini olish uchun noyob va tavsiflovchi hodisa nomlarini tanlang.
• Ma'lumotlarni serializatsiya qilish: `detail` xususiyatiga kiritilgan har qanday ma'lumot serializatsiya qilinishi mumkinligiga ishonch hosil qiling.
• Global doira: `document` da yuborilgan hodisalar global miqyosda mavjud bo'lib, bu ham afzallik, ham potentsial kamchilik bo'lishi mumkin.

3. Reflardan va To'g'ridan-to'g'ri DOM Manipulyatsiyasidan Foydalanish (Ehtiyotkorlik bilan foydalaning)

React dasturlashda odatda tavsiya etilmasa-da, ref'lar yordamida DOMga to'g'ridan-to'g'ri kirish va uni manipulyatsiya qilish ba'zan murakkab hodisalarni boshqarish stsenariylari uchun zarur bo'lishi mumkin. Biroq, to'g'ridan-to'g'ri DOM manipulyatsiyasini minimallashtirish va iloji boricha Reactning deklarativ yondashuvini afzal ko'rish juda muhimdir.

Qanday ishlaydi:

1. `React.createRef()` yoki `useRef()` yordamida ref yarating.
2. Portal ichidagi DOM elementiga ref'ni biriktiring.
3. `ref.current` yordamida DOM elementiga kiring.
4. Hodisa tinglovchilarini to'g'ridan-to'g'ri DOM elementiga biriktiring.

Misol:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

Ushbu misolda, portal ichidagi tugmaga ref biriktirilgan. Keyin hodisa tinglovchisi `buttonRef.current.addEventListener()` yordamida to'g'ridan-to'g'ri tugmaning DOM elementiga biriktiriladi. Bu yondashuv Reactning hodisalar tizimini chetlab o'tadi va hodisalarni boshqarish ustidan to'g'ridan-to'g'ri nazoratni ta'minlaydi.

Afzalliklari:

• To'g'ridan-to'g'ri nazorat: Hodisalarni boshqarish ustidan nozik nazoratni ta'minlaydi.
• React hodisalar tizimini chetlab o'tish: Reactning hodisalar tizimi yetarli bo'lmagan maxsus holatlarda foydali bo'lishi mumkin.

E'tiborga olinadigan jihatlar:

• Ziddiyatlar ehtimoli: Ehtiyotkorlik bilan ishlatilmasa, React hodisalar tizimi bilan ziddiyatlarga olib kelishi mumkin.
• Qo'llab-quvvatlash murakkabligi: Kodni qo'llab-quvvatlashni va tushunishni qiyinlashtiradi.
• Anti-pattern: Ko'pincha React dasturlashda anti-pattern hisoblanadi. Kamdan-kam va faqat zarur bo'lganda foydalaning.

4. Umumiy Holatni Boshqarish Yechimidan Foydalanish (masalan, Redux, Zustand, Context API)

Agar portal ichidagi va tashqarisidagi komponentlar holatni bo'lishishi va bir xil hodisalarga reaksiya bildirishi kerak bo'lsa, umumiy holatni boshqarish yechimi toza va samarali yondashuv bo'lishi mumkin.

Qanday ishlaydi:

1. Redux, Zustand yoki React'ning Context API yordamida umumiy holat yarating.
2. Portal ichidagi komponentlar amallarni yuborishi yoki umumiy holatni yangilashi mumkin.
3. Portal tashqarisidagi komponentlar umumiy holatga obuna bo'lishi va o'zgarishlarga reaksiya bildirishi mumkin.

Misol (React Context API yordamida):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

Ushbu misolda `EventContext` umumiy holatni (`buttonClicked`) va ishlovchini (`handleButtonClick`) ta'minlaydi. `PortalContent` komponenti tugma bosilganda `handleButtonClick` ni chaqiradi, `PortalAwareComponent` komponenti esa `buttonClicked` holatiga obuna bo'ladi va u o'zgarganda qayta render qilinadi.

Afzalliklari:

• Markazlashtirilgan holatni boshqarish: Holatni boshqarishni va komponentlar o'rtasidagi aloqani soddalashtiradi.
• Bashorat qilinadigan ma'lumotlar oqimi: Aniq va bashorat qilinadigan ma'lumotlar oqimini ta'minlaydi.
• Sinovdan o'tkazish imkoniyati: Kodni sinovdan o'tkazishni osonlashtiradi.

E'tiborga olinadigan jihatlar:

• Qo'shimcha yuklama: Holatni boshqarish yechimini qo'shish, ayniqsa, oddiy ilovalar uchun qo'shimcha yuklama keltirib chiqarishi mumkin.
• O'rganish murakkabligi: Tanlangan holatni boshqarish kutubxonasi yoki APIni o'rganish va tushunishni talab qiladi.

Portallararo Hodisalarni Boshqarish bo'yicha Eng Yaxshi Amaliyotlar

Portallararo hodisalarni boshqarishda quyidagi eng yaxshi amaliyotlarni e'tiborga oling:

• To'g'ridan-to'g'ri DOM Manipulyatsiyasini Kamaytiring: Iloji boricha Reactning deklarativ yondashuvini afzal ko'ring. Mutlaqo zarur bo'lmasa, DOMni to'g'ridan-to'g'ri manipulyatsiya qilishdan saqlaning.
• Hodisalarni Delegatsiya Qilishdan Oqilona Foydalaning: Hodisalarni delegatsiya qilish kuchli vosita bo'lishi mumkin, ammo hodisa manbalarini diqqat bilan nishonga olganingizga ishonch hosil qiling.
• Maxsus Hodisalarni Ko'rib Chiqing: Maxsus hodisalar komponentlar o'rtasida aloqa qilishning moslashuvchan va bog'liqlikni kamaytiradigan usulini ta'minlashi mumkin.
• To'g'ri Holatni Boshqarish Yechimini Tanlang: Agar komponentlar holatni bo'lishishi kerak bo'lsa, ilovangizning murakkabligiga mos keladigan holatni boshqarish yechimini tanlang.
• Puxta Sinovdan O'tkazish: Hodisalarni boshqarish mantig'ingiz barcha stsenariylarda kutilganidek ishlashini ta'minlash uchun uni puxta sinovdan o'tkazing. Chekka holatlarga va boshqa hodisa tinglovchilari bilan potentsial ziddiyatlarga alohida e'tibor bering.
• Kodingizni Hujjatlashtiring: Hodisalarni boshqarish mantig'ingizni, ayniqsa murakkab texnikalar yoki to'g'ridan-to'g'ri DOM manipulyatsiyasidan foydalanganda, aniq hujjatlashtiring.

Xulosa

React Portallari o'z ota-ona komponentlari chegarasidan chiqib ketishi kerak bo'lgan UI elementlarini boshqarishning kuchli usulini taklif qiladi. Biroq, portallar bo'ylab hodisalarni boshqarish puxta o'ylashni va tegishli texnikalarni qo'llashni talab qiladi. Qiyinchiliklarni tushunib, hodisalarni delegatsiya qilish, maxsus hodisalar va umumiy holatni boshqarish kabi strategiyalarni qo'llash orqali siz portallar ichida paydo bo'ladigan hodisalarni samarali ushlab qolishingiz va ilovangiz kutilganidek ishlashini ta'minlashingiz mumkin. Toza, qo'llab-quvvatlanadigan va sinovdan o'tkaziladigan kod bazasini saqlash uchun Reactning deklarativ yondashuviga ustunlik berishni va to'g'ridan-to'g'ri DOM manipulyatsiyasini kamaytirishni unutmang.