रिएक्ट में मॉडल और टूलटिप्स बनाना अक्सर स्टाइल के लिए जटिल होता था और कई स्टाइलिंग त्रुटियों की ओर ले जाता था।
createPortal एपीआई इस प्रक्रिया को सरल बनाता है जो मुख्य DOM के बाहर घटकों को प्रस्तुत करने की अनुमति देता है, जिसके परिणामस्वरूप स्टाइल और रखरखाव में आसानी होती है। इस पोस्ट में हम सीखेंगे कि रिएक्ट में सही तरीके से मॉडल और टूलटिप्स बनाने के लिए इस टूल का उपयोग कैसे करें।

क्रिएटपोर्टल एपीआई को समझना

createPortal रिएक्ट बिल्ड-इन फ़ंक्शन है जो आपको DOM के विभिन्न भागों में घटक प्रस्तुत करने की अनुमति देता है। और यह निर्माण के लिए विशेष रूप से उपयोगी है: मॉडल और ओवरले, तृतीय-पक्ष घटक और कस्टम यूआई तत्व।

यह काम किस प्रकार करता है

घटक के रिटर्न स्टेटमेंट के अंदर एक पोर्टल का उपयोग किया जाता है और यह केवल DOM नोड के भौतिक प्लेसमेंट को बदलता है। यह मुख्य DOM ट्री के बाहर DOM नोड को टेलीपोर्ट करने जैसा है। क्रिएटपोर्टल एपीआई दो पैरामीटर और तीसरे वैकल्पिक तक पहुंच बनाता है:

• बच्चे: कुछ भी जिसे रिएक्ट, एक div, घटक या रिएक्ट खंड के साथ प्रस्तुत किया जा सकता है।
• domNode: रखे जाने वाले बच्चों का स्थान कौन सा है।
• कुंजी (वैकल्पिक): पोर्टल कुंजी के रूप में उपयोग की जाने वाली एक अद्वितीय संख्या या स्ट्रिंग।

यदि हम मानते हैं कि हम घटक ए में एक पोर्टल बनाते हैं और इसे घटक बी में प्रस्तुत करते हैं, तो पोर्टल के बच्चे घटक ए के सभी राज्य और चर तक पहुंच प्राप्त करेंगे और घटक ए में कार्य करेंगे, जबकि इसे घटक में प्रस्तुत किया गया है। बी।

पोर्टल बनाना एवं उपयोग करना

नीचे दिए गए उदाहरण में पोर्टल का उपयोग घटक चाइल्ड को टेलीपोर्ट करने के लिए किया जाता है जो एक स्थिति को स्वीकार करता है और इस घटक को बॉडी में ले जाता है।

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

अब चाइल्ड कंपोनेंट को HTML में बॉडी टैग्स में प्रस्तुत किया जाएगा।

निष्कर्ष

createPortal रिएक्ट में मोडल्स, टूलटिप्स और अन्य घटकों को बनाने के लिए एक मूल्यवान उपकरण है, जिन्हें मुख्य DOM ट्री के बाहर प्रस्तुत करने की आवश्यकता होती है। इस उपकरण का उपयोग करके आप इन तत्वों का एक स्वच्छ, अधिक लचीला और अधिक कुशल दृष्टिकोण प्राप्त कर सकते हैं।