ரியாக்ட் createPortal: போர்ட்டல் உருவாக்கம் மற்றும் நிகழ்வு கையாளுதலில் தேர்ச்சி பெறுதல்

நவீன வலை மேம்பாட்டில் ரியாக்ட்டைப் பயன்படுத்தும்போது, ​​இணைய ஆவணத்தின் அமைப்புடன் தடையின்றி ஒருங்கிணைக்கும் பயனர் இடைமுகங்களை உருவாக்குவது மிகவும் முக்கியமானது. ரியாக்ட்டின் கூறு மாதிரி மெய்நிகர் DOM-ஐ நிர்வகிப்பதில் சிறந்து விளங்கினாலும், சில நேரங்களில் நாம் இயல்பான கூறு படிநிலைக்கு வெளியே உறுப்புகளை ரெண்டர் செய்ய வேண்டியிருக்கும். இங்குதான் createPortal உதவுகிறது. இந்த வழிகாட்டி createPortal-ஐ ஆழமாக ஆராய்கிறது. அதன் நோக்கம், பயன்பாடு, நிகழ்வுகளைக் கையாள்வதற்கான மேம்பட்ட நுட்பங்கள் மற்றும் சிக்கலான UI கூறுகளை உருவாக்குவது பற்றி விவரிக்கிறது. சர்வதேசமயமாக்கல் பரிசீலனைகள், அணுகல்தன்மைக்கான சிறந்த நடைமுறைகள் மற்றும் தவிர்க்க வேண்டிய பொதுவான தவறுகள் ஆகியவற்றையும் நாம் காண்போம்.

ரியாக்ட் createPortal என்றால் என்ன?

createPortal என்பது ஒரு ரியாக்ட் API ஆகும். இது ஒரு ரியாக்ட் கூறின் குழந்தைகளை DOM மரத்தின் வேறு ஒரு பகுதிக்கு, அதாவது பெற்றோர் கூறின் படிநிலைக்கு வெளியே ரெண்டர் செய்ய அனுமதிக்கிறது. இது மோடல்கள், டூல்டிப்கள், டிராப்டவுன்கள் மற்றும் ஓவர்லே போன்ற கூறுகளை உருவாக்குவதற்கு மிகவும் பயனுள்ளதாக இருக்கும். இந்த கூறுகள் அவற்றை தூண்டும் கூறு ரியாக்ட் கூறு மரத்தில் எங்கு அமைந்திருந்தாலும், ஆவணத்தின் மேல் மட்டத்தில் அல்லது ஒரு குறிப்பிட்ட கொள்கலனுக்குள் நிலைநிறுத்தப்பட வேண்டும்.

createPortal இல்லாமல் இதைச் செய்வது, DOM-ஐ நேரடியாகக் கையாளுதல் அல்லது CSS absolute positioning-ஐப் பயன்படுத்துதல் போன்ற சிக்கலான மாற்று வழிகளை உள்ளடக்கியது. இது ஸ்டேக்கிங் சூழல்கள், z-index முரண்பாடுகள் மற்றும் அணுகல்தன்மையில் சிக்கல்களுக்கு வழிவகுக்கும்.

ஏன் createPortal-ஐப் பயன்படுத்த வேண்டும்?

உங்கள் ரியாக்ட் ஆயுதக் களஞ்சியத்தில் createPortal ஒரு மதிப்புமிக்க கருவியாக இருப்பதற்கான முக்கிய காரணங்கள் இங்கே:

• மேம்படுத்தப்பட்ட DOM அமைப்பு: DOM-இல் கூறுகளை ஆழமாகப் பதிக்காமல், ஒரு தூய்மையான மற்றும் நிர்வகிக்க எளிதான அமைப்பிற்கு வழிவகுக்கிறது. பல ஊடாடும் கூறுகளைக் கொண்ட சிக்கலான பயன்பாடுகளுக்கு இது மிகவும் முக்கியம்.
• எளிமைப்படுத்தப்பட்ட ஸ்டைலிங்: சிக்கலான CSS தந்திரங்களைச் சார்ந்து இல்லாமல், வியூபோர்ட் அல்லது குறிப்பிட்ட கொள்கலன்களுக்கு ஏற்ப கூறுகளை எளிதாக நிலைநிறுத்தலாம். இது மற்ற உள்ளடக்கத்தின் மீது மேலெழுத வேண்டிய கூறுகளுடன் கையாளும்போது ஸ்டைலிங் மற்றும் லேஅவுட்டை எளிதாக்குகிறது.
• மேம்பட்ட அணுகல்தன்மை: கூறு படிநிலையிலிருந்து சுயாதீனமாக ஃபோகஸ் மற்றும் விசைப்பலகை வழிசெலுத்தலை நிர்வகிக்க அனுமதிப்பதன் மூலம் அணுகக்கூடிய UI-களை உருவாக்குவதை எளிதாக்குகிறது. உதாரணமாக, ஒரு மோடல் சாளரத்திற்குள் ஃபோகஸ் இருப்பதை உறுதி செய்வது.
• சிறந்த நிகழ்வு கையாளுதல்: போர்ட்டலின் உள்ளடக்கத்திலிருந்து ரியாக்ட் மரத்திற்கு நிகழ்வுகள் சரியாகப் பரவ அனுமதிக்கிறது, இதனால் பெற்றோர் கூறுகளில் இணைக்கப்பட்டுள்ள நிகழ்வு கேட்பவர்கள் எதிர்பார்த்தபடி செயல்படுவதை உறுதி செய்கிறது.

createPortal-இன் அடிப்படைப் பயன்பாடு

createPortal API இரண்டு வாதங்களை ஏற்றுக்கொள்கிறது:

1. நீங்கள் ரெண்டர் செய்ய விரும்பும் ரியாக்ட் நோட் (JSX).
2. நீங்கள் நோடை ரெண்டர் செய்ய விரும்பும் DOM உறுப்பு. இந்த DOM உறுப்பு, createPortal-ஐப் பயன்படுத்தும் கூறு மவுண்ட் ஆவதற்கு முன்பே இருக்க வேண்டும்.

இதோ ஒரு எளிய உதாரணம்:

உதாரணம்: ஒரு மோடலை ரெண்டர் செய்தல்

உங்களிடம் ஒரு மோடல் கூறு இருப்பதாக வைத்துக்கொள்வோம், அதை நீங்கள் body உறுப்பின் முடிவில் ரெண்டர் செய்ய விரும்புகிறீர்கள்.

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

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  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
              
            
          

விளக்கம்:

• createPortal என்பது ReactDOM பொருளின் ஒரு முறை என்பதால், நாம் ReactDOM-ஐ இறக்குமதி செய்கிறோம்.
• உங்கள் HTML-இல் modal-root என்ற ID கொண்ட ஒரு DOM உறுப்பு இருப்பதாக நாம் கருதுகிறோம். இங்குதான் மோடல் ரெண்டர் செய்யப்படும். இந்த உறுப்பு இருப்பதை உறுதிப்படுத்தவும். உங்கள் index.html கோப்பில் மூடும் </body> குறிச்சொல்லுக்கு சற்று முன்பு <div id="modal-root"></div>-ஐ சேர்ப்பது ஒரு பொதுவான நடைமுறை.
• மோடலின் JSX-ஐ modalRoot உறுப்பில் ரெண்டர் செய்ய நாம் ReactDOM.createPortal-ஐப் பயன்படுத்துகிறோம்.
• ஓவர்லேயில் உள்ள onClose ஹேண்ட்லரை மோடல் உள்ளடக்கத்தில் உள்ள onClick நிகழ்வு தூண்டுவதைத் தடுக்க நாம் e.stopPropagation()-ஐப் பயன்படுத்துகிறோம். இது மோடலுக்குள் கிளிக் செய்தால் அது மூடாது என்பதை உறுதி செய்கிறது.

பயன்பாடு:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த உதாரணம், இயல்பான கூறு படிநிலைக்கு வெளியே ஒரு மோடலை எப்படி ரெண்டர் செய்வது என்பதைக் காட்டுகிறது, இது பக்கத்தில் அதை முழுமையாக நிலைநிறுத்த உங்களை அனுமதிக்கிறது. இந்த வழியில் createPortal-ஐப் பயன்படுத்துவது ஸ்டேக்கிங் சூழல்களுடன் உள்ள பொதுவான சிக்கல்களைத் தீர்க்கிறது மற்றும் உங்கள் பயன்பாடு முழுவதும் நிலையான மோடல் ஸ்டைலிங்கை எளிதாக உருவாக்க உங்களை அனுமதிக்கிறது.

createPortal உடன் நிகழ்வு கையாளுதல்

createPortal-இன் முக்கிய நன்மைகளில் ஒன்று, அது ரியாக்ட்டின் இயல்பான நிகழ்வு பரவல் (event bubbling) நடத்தையைத் தக்க வைத்துக் கொள்வதுதான். இதன் பொருள், போர்ட்டலின் உள்ளடக்கத்தில் தொடங்கும் நிகழ்வுகள் இன்னும் ரியாக்ட் கூறு மரத்தில் மேல்நோக்கிப் பரவும், இதனால் பெற்றோர் கூறுகள் அவற்றைக் கையாள முடியும்.

இருப்பினும், நிகழ்வுகள் போர்ட்டல் எல்லையைக் கடக்கும்போது அவை எவ்வாறு கையாளப்படுகின்றன என்பதைப் புரிந்துகொள்வது அவசியம்.

உதாரணம்: போர்ட்டலுக்கு வெளியே நிகழ்வுகளைக் கையாளுதல்

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

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

விளக்கம்:

• போர்ட்டலுக்குள் ரெண்டர் செய்யப்பட்ட டிராப்டவுன் உறுப்பை அணுக நாம் ஒரு ref-ஐப் பயன்படுத்துகிறோம்.
• டிராப்டவுனுக்கு வெளியே நிகழும் கிளிக்குகளைக் கண்டறிய நாம் document-இல் ஒரு mousedown நிகழ்வு கேட்பவரை இணைக்கிறோம்.
• நிகழ்வு கேட்பவருக்குள், dropdownRef.current.contains(event.target)-ஐப் பயன்படுத்தி கிளிக் டிராப்டவுனுக்கு வெளியே நிகழ்ந்ததா என்று சரிபார்க்கிறோம்.
• கிளிக் டிராப்டவுனுக்கு வெளியே நிகழ்ந்தால், isOpen-ஐ false என அமைப்பதன் மூலம் அதை மூடுகிறோம்.

இந்த உதாரணம், போர்ட்டலின் உள்ளடக்கத்திற்கு வெளியே நிகழும் நிகழ்வுகளை எவ்வாறு கையாள்வது என்பதைக் காட்டுகிறது, சுற்றியுள்ள ஆவணத்தில் பயனர் செயல்களுக்குப் பதிலளிக்கும் ஊடாடும் கூறுகளை உருவாக்க உங்களை அனுமதிக்கிறது.

மேம்பட்ட பயன்பாட்டு நிகழ்வுகள்

createPortal எளிய மோடல்கள் மற்றும் டூல்டிப்களுக்கு மட்டும் அல்ல. இது பல்வேறு மேம்பட்ட சூழ்நிலைகளில் பயன்படுத்தப்படலாம், அவற்றுள்:

• சூழல் மெனுக்கள் (Context Menus): வலது கிளிக் செய்யும்போது சுட்டிக்கு அருகில் சூழல் மெனுக்களை மாறும் வகையில் ரெண்டர் செய்தல்.
• அறிவிப்புகள்: கூறு படிநிலையைப் பொருட்படுத்தாமல், திரையின் மேற்புறத்தில் அறிவிப்புகளைக் காண்பித்தல்.
• தனிப்பயன் பாப்ஓவர்கள் (Custom Popovers): மேம்பட்ட நிலைப்படுத்தல் மற்றும் ஸ்டைலிங்குடன் தனிப்பயன் பாப்ஓவர் கூறுகளை உருவாக்குதல்.
• மூன்றாம் தரப்பு நூலகங்களுடன் ஒருங்கிணைப்பு: குறிப்பிட்ட DOM அமைப்புகள் தேவைப்படும் மூன்றாம் தரப்பு நூலகங்களுடன் ரியாக்ட் கூறுகளை ஒருங்கிணைக்க createPortal-ஐப் பயன்படுத்துதல்.

உதாரணம்: ஒரு சூழல் மெனுவை உருவாக்குதல்

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

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

விளக்கம்:

• இலக்கு உறுப்பில் வலது கிளிக்குகளைக் கண்டறிய நாம் onContextMenu நிகழ்வைப் பயன்படுத்துகிறோம்.
• event.preventDefault()-ஐப் பயன்படுத்தி இயல்புநிலை சூழல் மெனு தோன்றுவதைத் தடுக்கிறோம்.
• சுட்டியின் ஆயத்தொலைவுகளை contextMenu நிலை மாறியில் சேமிக்கிறோம்.
• சூழல் மெனுவை ஒரு போர்ட்டலுக்குள், சுட்டியின் ஆயத்தொலைவுகளில் நிலைநிறுத்தி ரெண்டர் செய்கிறோம்.
• பயனர் அதற்கு வெளியே கிளிக் செய்யும்போது சூழல் மெனுவை மூடுவதற்கு, முந்தைய உதாரணத்தில் உள்ள அதே வெளி-கிளிக் கண்டறிதல் தர்க்கத்தை நாம் சேர்க்கிறோம்.

அணுகல்தன்மை பரிசீலனைகள்

createPortal-ஐப் பயன்படுத்தும்போது, உங்கள் பயன்பாடு அனைவராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிப்படுத்த அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம்.

ஃபோகஸ் மேலாண்மை

ஒரு போர்ட்டல் திறக்கப்படும்போது (எ.கா., ஒரு மோடல்), ஃபோகஸ் தானாகவே போர்ட்டலுக்குள் உள்ள முதல் ஊடாடும் உறுப்புக்கு மாற்றப்படுவதை நீங்கள் உறுதி செய்ய வேண்டும். இது விசைப்பலகை அல்லது ஸ்கிரீன் ரீடர் மூலம் வழிசெலுத்தும் பயனர்களுக்கு போர்ட்டலின் உள்ளடக்கத்தை எளிதாக அணுக உதவுகிறது.

போர்ட்டல் மூடப்படும்போது, போர்ட்டல் திறக்கக் காரணமான உறுப்புக்கு ஃபோகஸைத் திரும்பக் கொடுக்க வேண்டும். இது ஒரு நிலையான வழிசெலுத்தல் ஓட்டத்தை பராமரிக்கிறது.

ARIA பண்புக்கூறுகள்

போர்ட்டலின் உள்ளடக்கம் பற்றிய சொற்பொருள் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும். உதாரணமாக, இது ஒரு மோடல் உரையாடல் என்பதைக் குறிக்க மோடல் உறுப்பில் aria-modal="true"-ஐப் பயன்படுத்தவும். மோடலை அதன் தலைப்புடன் இணைக்க aria-labelledby மற்றும் அதன் விளக்கத்துடன் இணைக்க aria-describedby ஆகியவற்றைப் பயன்படுத்தவும்.

விசைப்பலகை வழிசெலுத்தல்

பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி போர்ட்டலின் உள்ளடக்கத்தை வழிநடத்த முடியும் என்பதை உறுதிப்படுத்தவும். ஃபோகஸ் வரிசையைக் கட்டுப்படுத்த tabindex பண்புக்கூறுகளைப் பயன்படுத்தவும், மேலும் அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை மூலம் அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.

போர்ட்டலுக்குள் ஃபோகஸை சிக்க வைப்பதைக் கருத்தில் கொள்ளுங்கள், இதனால் பயனர்கள் தற்செயலாக அதற்கு வெளியே செல்ல முடியாது. Tab விசையைக் கேட்டு, நிரல்ரீதியாக போர்ட்டலுக்குள் முதல் அல்லது கடைசி ஊடாடும் உறுப்புக்கு ஃபோகஸை நகர்த்துவதன் மூலம் இதை அடையலாம்.

உதாரணம்: அணுகக்கூடிய மோடல்

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

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

விளக்கம்:

• மோடல் பற்றிய சொற்பொருள் தகவல்களை வழங்க aria-modal, aria-labelledby, மற்றும் aria-describedby போன்ற ARIA பண்புக்கூறுகளைப் பயன்படுத்துகிறோம்.
• மோடல் திறக்கும்போதும் மூடும்போதும் ஃபோகஸை நிர்வகிக்க useEffect ஹூக்கைப் பயன்படுத்துகிறோம்.
• மோடலைத் திறப்பதற்கு முன்பு தற்போது ஃபோகஸ் செய்யப்பட்ட உறுப்பைச் சேமித்து, மோடல் மூடப்படும்போது ஃபோகஸை அதற்கு மீட்டெடுக்கிறோம்.
• ஒரு keydown நிகழ்வு கேட்பவரைப் பயன்படுத்தி மோடலுக்குள் ஃபோகஸை சிக்க வைக்கிறோம்.

சர்வதேசமயமாக்கல் (i18n) பரிசீலனைகள்

ஒரு உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) ஒரு முக்கியமான கருத்தாகும். createPortal-ஐப் பயன்படுத்தும்போது, சில விஷயங்களைக் கவனத்தில் கொள்ள வேண்டும்:

• உரை திசை (RTL/LTR): உங்கள் ஸ்டைலிங் இடமிருந்து வலம் (LTR) மற்றும் வலமிருந்து இடம் (RTL) ஆகிய இரு மொழிகளுக்கும் இடமளிப்பதை உறுதி செய்யவும். இது CSS-இல் தர்க்கரீதியான பண்புகளைப் பயன்படுத்துவதை (எ.கா., margin-left-க்கு பதிலாக margin-inline-start) மற்றும் HTML உறுப்பில் dir பண்புக்கூறைப் பொருத்தமாக அமைப்பதை உள்ளடக்கலாம்.
• உள்ளடக்கத்தை உள்ளூர்மயமாக்குதல்: போர்ட்டலுக்குள் உள்ள அனைத்து உரைகளும் பயனரின் விருப்பமான மொழிக்கு உள்ளூர்மயமாக்கப்பட வேண்டும். மொழிபெயர்ப்புகளை நிர்வகிக்க ஒரு i18n நூலகத்தை (எ.கா., react-intl, i18next) பயன்படுத்தவும்.
• எண் மற்றும் தேதி வடிவமைப்பு: பயனரின் இருப்பிடத்திற்கு ஏற்ப எண்களையும் தேதிகளையும் வடிவமைக்கவும். Intl API இதற்கான செயல்பாடுகளை வழங்குகிறது.
• கலாச்சார மரபுகள்: UI கூறுகளுடன் தொடர்புடைய கலாச்சார மரபுகளைப் பற்றி அறிந்திருங்கள். உதாரணமாக, பொத்தான் வைப்பு கலாச்சாரங்களுக்கு இடையில் வேறுபடலாம்.

உதாரணம்: react-intl உடன் i18n

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

react-intl-இல் இருந்து FormattedMessage கூறு பயனரின் இருப்பிடத்தின் அடிப்படையில் மொழிபெயர்க்கப்பட்ட செய்தியைப் பெறுகிறது. வெவ்வேறு மொழிகளுக்கான உங்கள் மொழிபெயர்ப்புகளுடன் react-intl-ஐ உள்ளமைக்கவும்.

பொதுவான தவறுகளும் தீர்வுகளும்

createPortal ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், சில பொதுவான தவறுகள் மற்றும் அவற்றை எவ்வாறு தவிர்ப்பது என்பதைப் பற்றி அறிந்திருப்பது முக்கியம்:

• போர்ட்டல் ரூட் உறுப்பு இல்லாதது: போர்ட்டல் ரூட்டாக நீங்கள் பயன்படுத்தும் DOM உறுப்பு, createPortal-ஐப் பயன்படுத்தும் கூறு மவுண்ட் ஆவதற்கு முன்பே இருப்பதை உறுதிப்படுத்தவும். அதை நேரடியாக index.html-இல் வைப்பது ஒரு நல்ல நடைமுறை.
• Z-Index முரண்பாடுகள்: createPortal உடன் கூறுகளை நிலைநிறுத்தும்போது z-index மதிப்புகளைக் கவனத்தில் கொள்ளுங்கள். ஸ்டேக்கிங் சூழல்களை நிர்வகிக்க CSS-ஐப் பயன்படுத்தவும், உங்கள் போர்ட்டலின் உள்ளடக்கம் சரியாகக் காட்டப்படுவதை உறுதி செய்யவும்.
• நிகழ்வு கையாளுதல் சிக்கல்கள்: நிகழ்வுகள் போர்ட்டல் வழியாக எவ்வாறு பரவுகின்றன என்பதைப் புரிந்துகொண்டு அவற்றை முறையாகக் கையாளவும். நிகழ்வுகள் தேவையற்ற செயல்களைத் தூண்டுவதைத் தடுக்க e.stopPropagation()-ஐப் பயன்படுத்தவும்.
• நினைவக கசிவுகள் (Memory Leaks): நினைவக கசிவுகளைத் தவிர்க்க, createPortal-ஐப் பயன்படுத்தும் கூறு அன்மவுண்ட் ஆகும்போது நிகழ்வு கேட்பவர்கள் மற்றும் குறிப்புகளைச் சரியாக சுத்தம் செய்யவும். இதை அடைய ஒரு தூய்மைப்படுத்தும் செயல்பாட்டுடன் useEffect ஹூக்கைப் பயன்படுத்தவும்.
• எதிர்பாராத ஸ்க்ரோலிங் சிக்கல்கள்: போர்ட்டல்கள் சில நேரங்களில் பக்கத்தின் எதிர்பார்க்கப்படும் ஸ்க்ரோலிங் நடத்தையில் தலையிடக்கூடும். உங்கள் ஸ்டைல்கள் ஸ்க்ரோலிங்கைத் தடுக்கவில்லை என்பதையும், மோடல் கூறுகள் திறக்கும்போதும் மூடும்போதும் பக்கத் தாவல்கள் அல்லது எதிர்பாராத ஸ்க்ரோலிங் நடத்தையை ஏற்படுத்தவில்லை என்பதையும் உறுதிப்படுத்தவும்.

முடிவுரை

React.createPortal என்பது ரியாக்ட்டில் நெகிழ்வான, அணுகக்கூடிய மற்றும் பராமரிக்கக்கூடிய UI-களை உருவாக்குவதற்கான ஒரு மதிப்புமிக்க கருவியாகும். அதன் நோக்கம், பயன்பாடு, நிகழ்வுகளைக் கையாள்வதற்கான மேம்பட்ட நுட்பங்கள் மற்றும் அணுகல்தன்மை ஆகியவற்றைப் புரிந்துகொள்வதன் மூலம், ஒரு உலகளாவிய பார்வையாளர்களுக்கு ஒரு சிறந்த பயனர் அனுபவத்தை வழங்கும் சிக்கலான மற்றும் ஈர்க்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க அதன் சக்தியை நீங்கள் பயன்படுத்தலாம். உங்கள் பயன்பாடுகள் அனைவரையும் உள்ளடக்கியதாகவும், அனைவராலும் பயன்படுத்தக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்த சர்வதேசமயமாக்கல் மற்றும் அணுகல்தன்மைக்கான சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.

இந்த வழிகாட்டியில் உள்ள வழிகாட்டுதல்கள் மற்றும் எடுத்துக்காட்டுகளைப் பின்பற்றுவதன் மூலம், பொதுவான UI சவால்களைத் தீர்க்கவும், பிரமிக்க வைக்கும் வலை அனுபவங்களை உருவாக்கவும் நீங்கள் நம்பிக்கையுடன் createPortal-ஐப் பயன்படுத்தலாம்.