M

MLOG

O'zbek

React Portallari boʻyicha toʻliq qoʻllanma. Ulardan foydalanish holatlari, joriy etish, afzalliklari va standart iyerarxiyadan tashqarida kontentni render qilishning eng yaxshi usullari.

React Portallari: Kontentni Komponentlar Daraxtidan Tashqarida Render Qilish

React portallari ota komponentning DOM iyerarxiyasidan tashqarida joylashgan DOM tuguniga bola komponentlarni render qilish uchun kuchli mexanizmni taqdim etadi. Bu uslub turli xil stsenariylarda, masalan, modallar, maslahatlar (tooltips) va sahifadagi elementlarning joylashuvi hamda qatlamlar tartibini aniq nazorat qilish zarur bo'lgan holatlarda bebaho hisoblanadi.

React Portallari nima?

Odatdagi React ilovasida komponentlar qat'iy iyerarxik tuzilmada render qilinadi. Ota komponent bola komponentlarni o'z ichiga oladi va hokazo. Biroq, ba'zida bu tuzilmadan chiqib ketish kerak bo'ladi. Aynan shu yerda React portallari yordamga keladi. Portal komponentning kontentini DOMning boshqa qismiga render qilish imkonini beradi, hatto bu qism React daraxtidagi komponentning bevosita avlodi bo'lmasa ham.

Tasavvur qiling, sizda modal komponent mavjud bo'lib, u komponentlar daraxtida qayerda render qilinishidan qat'i nazar, ilovangizning eng yuqori darajasida ko'rsatilishi kerak. Portallarsiz, siz bunga mutlaq joylashuv (absolute positioning) va z-index yordamida erishishga harakat qilishingiz mumkin, bu esa murakkab uslublash muammolariga va potentsial ziddiyatlarga olib kelishi mumkin. Portallar yordamida siz modalning kontentini to'g'ridan-to'g'ri maxsus DOM tuguniga, masalan, ajratilgan "modal-root" elementiga render qilishingiz mumkin, bu uning har doim to'g'ri darajada render qilinishini ta'minlaydi.

Nima uchun React Portallaridan foydalanish kerak?

React Portallari veb-dasturlashdagi bir nechta umumiy muammolarni hal qiladi:

React Portallarini qanday joriy qilish kerak

React Portallaridan foydalanish juda oddiy. Mana bosqichma-bosqich qo'llanma:

  1. DOM tugunini yaratish: Avval portal kontentini render qilmoqchi bo'lgan DOM tugunini yarating. Bu odatda sizning `index.html` faylingizda amalga oshiriladi. Masalan: 
    <div id="modal-root"></div>
  2. `ReactDOM.createPortal()` dan foydalanish: React komponentingizda, `ReactDOM.createPortal()` usulidan foydalanib, kontentni yaratilgan DOM tuguniga render qiling. Bu usul ikkita argumentni qabul qiladi: React tuguni (siz render qilmoqchi bo'lgan kontent) va uni render qilmoqchi bo'lgan DOM tuguni. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Bu kontent modal-root'da render qilinadi!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Komponentni render qilish: Portalni o'z ichiga olgan komponentni boshqa har qanday React komponenti kabi render qiling. 
    function App() {
  return (
    <div>
      <h1>Mening ilovam</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Ushbu misolda `MyComponent` ichidagi kontent `modal-root` elementi ichida render qilinadi, garchi `MyComponent` `App` komponenti ichida render qilingan bo'lsa ham.

Misol: React Portallari yordamida Modal Komponent yaratish

Keling, React Portallari yordamida to'liq modal komponent yaratamiz. Ushbu misol asosiy uslublash va modalni ochish va yopish funksionalligini o'z ichiga oladi.

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

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

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

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

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Mening ilovam</h1>
      <button onClick={handleOpenModal}>Modalni ochish</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modal Kontenti</h2>
          <p>Bu modalning kontenti.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Ushbu misolda:

Shuningdek, modalni ekranda to'g'ri joylashtirish uchun `modal-overlay` va `modal` sinflariga ba'zi CSS uslublarini qo'shishingiz kerak bo'ladi. Masalan:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

Portallar bilan hodisalarni boshqarish

Portallardan foydalanishda e'tiborga olish kerak bo'lgan muhim jihatlardan biri bu hodisalarning qanday boshqarilishidir. Hodisalarning tarqalishi (Event bubbling) portallar bilan standart React komponentlariga qaraganda boshqacha ishlaydi.

Portal ichida hodisa yuz berganda, u odatdagidek DOM daraxti bo'ylab yuqoriga tarqaladi. Biroq, React hodisalar tizimi portalni oddiy React tuguni sifatida qabul qiladi, ya'ni hodisalar portalni o'z ichiga olgan React komponentlar daraxti orqali ham tarqaladi.

Agar ehtiyot bo'lmasangiz, bu ba'zida kutilmagan xatti-harakatlarga olib kelishi mumkin. Masalan, agar sizda faqat o'sha komponent ichidagi hodisalar tomonidan ishga tushirilishi kerak bo'lgan ota komponentda hodisa ishlovchisi (event handler) bo'lsa, u portal ichidagi hodisalar tomonidan ham ishga tushirilishi mumkin.

Ushbu muammolarni oldini olish uchun, hodisaning yuqoriga tarqalishini to'xtatish uchun hodisa ob'ektida `stopPropagation()` usulidan foydalanishingiz mumkin. Shu bilan bir qatorda, hodisa ishlovchilarining qachon ishga tushirilishini nazorat qilish uchun Reactning sintetik hodisalari va shartli renderlashdan foydalanishingiz mumkin.

Mana, hodisaning ota komponentga tarqalishini oldini olish uchun `stopPropagation()` dan foydalanishga misol:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Portal ichida bosildi!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Bu kontent portalda render qilinadi.</div>,
    document.getElementById('portal-root')
  );
}

Ushbu misolda portal ichidagi kontentni bosish `handleClick` funksiyasini ishga tushiradi, ammo hodisa hech qanday ota komponentga tarqalmaydi.

React Portallaridan foydalanish bo'yicha eng yaxshi amaliyotlar

React Portallari bilan ishlashda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

React Portallariga alternativlar

React Portallari kuchli vosita bo'lsa-da, shunga o'xshash natijalarga erishish uchun foydalanishingiz mumkin bo'lgan muqobil yondashuvlar mavjud. Ba'zi keng tarqalgan alternativlar quyidagilarni o'z ichiga oladi:

Qaysi yondashuvni qo'llash tanlovi ilovangizning o'ziga xos talablariga va siz yaratmoqchi bo'lgan UI elementlarining murakkabligiga bog'liq. Elementlarning joylashuvi va qatlamlar tartibini aniq nazorat qilish va CSS ziddiyatlaridan qochish kerak bo'lganda, portallar odatda eng yaxshi variant hisoblanadi.

Global jihatlar

Global auditoriya uchun ilovalarni ishlab chiqishda lokalizatsiya, foydalanish imkoniyati va madaniy farqlar kabi omillarni hisobga olish muhimdir. React Portallari ushbu masalalarni hal qilishda rol o'ynashi mumkin:

Ushbu global jihatlarni hisobga olgan holda, siz turli xil auditoriya uchun yanada inklyuziv va foydalanuvchilarga qulay ilovalar yaratishingiz mumkin.

Xulosa

React Portallari kontentni standart komponentlar daraxtidan tashqarida render qilish uchun kuchli va ko'p qirrali vositadir. Ular modallar, maslahatlar va qalqib chiquvchi oynalar kabi keng tarqalgan UI andozalari uchun toza va oqilona yechimni taqdim etadi. Portallarning qanday ishlashini tushunish va eng yaxshi amaliyotlarga rioya qilish orqali siz yanada moslashuvchan, qo'llab-quvvatlanishi oson va foydalanish imkoniyati yuqori bo'lgan React ilovalarini yaratishingiz mumkin.

O'z loyihalaringizda portallar bilan tajriba o'tkazing va ular sizning UI ishlab chiqish jarayoningizni soddalashtirishi mumkin bo'lgan ko'plab usullarni kashf eting. Ishlab chiqarish dasturlarida portallardan foydalanganda hodisalarni boshqarish, foydalanish imkoniyati va global jihatlarni hisobga olishni unutmang.

React Portallarini o'zlashtirib, siz o'z React ko'nikmalaringizni keyingi bosqichga olib chiqishingiz va global auditoriya uchun yanada murakkab va foydalanuvchilarga qulay veb-ilovalar yaratishingiz mumkin.