प्रतिक्रिया: इसे प्रस्तुत करने से पहले तत्व के आकार को जानने के लिए

Question

मान लीजिए कि किसी घटक को इसे प्रस्तुत करने से पहले इसके आकार को जानने की आवश्यकता है। मेरे ज्ञान के साथ मैं यह कर सकता हूं: घटक प्रस्तुत करें, घटक में DidMount को डोम नोड प्राप्त करें और इसके बाहर निकालें, उस आकार के साथ स्थिति अपडेट करें, और फिर फिर से प्रस्तुत करें (इसे इवेंट श्रोताओं के साथ जटिल नहीं बनाते हैं जो मैं संलग्न करता हूं खिड़की का आकार बदलना घटना, मान लीजिए कि खिड़की का आकार बदलता नहीं है) यह काम करता है लेकिन गंदा लगता है, पहला रेंडर सिर्फ संसाधनों का अपशिष्ट है, मैं इसे प्रस्तुत करने से पहले तत्व (या इसके कंटेनर) के आकार को जानना चाहता हूं, मुझे पता है कि ज्यादातर जिस समय तत्व स्वयं आकार घोषित करता है, लेकिन कुछ स्थितियां होती हैं जब मूल तत्व आकार घोषित करता है और मेरा मामला उन परिस्थितियों में से एक है। तो इसे समेटने के लिए, क्या इसे प्रस्तुत करने से पहले प्रतिक्रिया घटक के मूल तत्व तक पहुंचने का कोई तरीका है (घटक WillMount में)?

पीएस मुझे प्रतिक्रिया-आयाम पता है, लेकिन मुझे एक सरल समाधान चाहिए जो बाहरी प्लगइन की आवश्यकता नहीं है। मैं सिर्फ यह जानना चाहता हूं कि घटक में मूल नोड तक पहुंचना संभव है या नहीं, प्रतिक्रिया में या नहीं।

Answer 1

उत्तर नहीं है, लेकिन कृपया विचारों के लिए पढ़ें कि कैसे सामना करना है।

यदि DOM तत्व मौजूद नहीं है, तो आप इसके आयाम नहीं पा सकते हैं। डीओएम तत्व मौजूद नहीं है जब तक कि प्रत्येक घटक के लिए पहले प्रस्तुत नहीं किया जाता है। घटक के componentDidMount() को तब तक आप इस DOM तत्व या उसके माता-पिता के बारे में कुछ भी नहीं जान सकते हैं।

यह भी ध्यान दें कि घटकों को प्रस्तुत किया गया है। पेड़/घटकों की श्रृंखला के आरंभिक प्रतिपादन पर, बच्चे के componentDidMount() को माता-पिता के componentDidMount() से पहले बुलाया जाएगा!

(MenuItemSubmenu:handleRefSet)   appMenu:2.2.5.4 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2.5.4 componentDidMount() 
(MenuPane:handleRefSet)     appMenu:2.2.5 handleRefSet() 
(MenuPane:componentDidMount)   appMenu:2.2.5 componentDidMount() 
(MenuItemSubmenu:handleRefSet)   appMenu:2.2.5 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2.5 componentDidMount() 
(MenuPane:handleRefSet)     appMenu:2.2 handleRefSet() 
(MenuPane:componentDidMount)   appMenu:2.2 componentDidMount() 
(MenuItemSubmenu:handleRefSet)   appMenu:2.2 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2 componentDidMount() 

componentDidMount() बच्चे आइटम 2.2.5.4 के लिए है कि अपने मूल आइटम 2.2.5 के लिए इससे पहले कि कहा जाता है: यहाँ एक नेस्टेड मेनू पेड़ से लॉग का एक स्नैपशॉट है। उस से हम देख सकते हैं कि जब तक बच्चे के लिए सभी प्रसंस्करण पूरा नहीं हो जाता है तब तक मूल घटक अपने स्वयं के डोम तत्व को नहीं जान सकता है। उम, वाह!

हालांकि, आपके प्रश्न का पीछा करते हुए, मैंने कुछ घटक को componentDidMount() विधि में लॉगिंग जोड़ा। मैंने this.refToOurDom.parentElement लॉग किया और पाया कि यह परिभाषित किया गया था और अच्छा लगा!

(MenuItemSubmenu:handleRefSet) appMenu:2.2.5.4 parent dims: height 76 width 127 

तो आपके सवाल का जवाब है, नहीं, अपने DOM एलीमेंट componentWillMount() में अभी तक अस्तित्व में नहीं है और माता-पिता मौजूद नहीं है या तो प्रारंभिक पर प्रस्तुत करना। किसी भी घटक के आयामों को जानने से पहले आपको componentDidMount() को तब तक प्रतीक्षा करनी होगी जब तक कि किसी घटक के आयामों को न ढूंढें।

लेकिन कृपया react-dimensions उपयोगों की चाल को नोट करें। शायद यह आपको विचार देगा कि आपके कोड को कैसे व्यवस्थित किया जाए।

इसकी render() विधि react-dimensions संलग्न घटक प्रस्तुत नहीं कर सकता है! प्रारंभिक प्रस्तुत करने पर यह केवल < div> को प्रस्तुत करता है। केवल componentDidMount() के बाद ही इसे कॉल किया जाता है और यह माता-पिता के आयामों को पाता है, केवल तब संलग्न घटक प्रस्तुत किया जाएगा, और अब अभिभावक के आयामों की आपूर्ति करता है।

तो एक और जवाब केवल आपके घटक की सामग्री प्रस्तुत नहीं करता है जब तक आप माता-पिता के आयामों को नहीं जानते। react-dimensions का उपयोग करना इतना आसान बनाता है, क्योंकि जब तक आयाम ज्ञात नहीं होते हैं तब तक आपको तब तक प्रस्तुत नहीं किया जाता है।लेकिन आप भी अपने componentDidMount() और हथियाने आयामों में संदर्भ के लिए हो रही है, और जब तक आप आयाम पता बस अपने घटक के असली सामग्री प्रतिपादन के चारों ओर एक if(){} डाल, बात का एक ही तरह कर सकता है। (आप की आवश्यकता होगी कम से कम एक बाहरी < div> अपने स्वयं के रेफरी पाने के लिए)