रिएक्ट नेटिव के साथ तत्वों को दिखाना और छिपाना

रिएक्ट एक पृष्ठ पर तत्वों की दृश्यता में हेरफेर करने के कई तरीके प्रदान करता है। डिस्प्ले प्रॉपर्टी सेट करने के लिए इनलाइन स्टाइल का उपयोग करना एक सामान्य तरीका है। हालाँकि, इस विधि के लिए इनलाइन स्टाइलिंग की आवश्यकता होती है, जो असुविधाजनक हो सकती है और कोड को कम पढ़ने योग्य बना सकती है।

एक अधिक सुंदर समाधान रिएक्ट स्टेट एपीआई का उपयोग करना है। स्टेट एपीआई आपको रिएक्ट घटक के भीतर डेटा को परिभाषित और प्रबंधित करने की अनुमति देता है। किसी घटक की स्थिति को बदलकर, आप पुन: रेंडर को ट्रिगर कर सकते हैं, जो नई स्थिति के आधार पर यूआई को अपडेट करेगा। रिएक्ट स्टेट एपीआई:

एक नया रिएक्ट घटक बनाएं, जैसे कि MyComponent।

1. अपने घटक की रेंडर विधि में, तत्व को प्रस्तुत करें आप दिखाना या छिपाना चाहते हैं, और यह निर्धारित करने के लिए सशर्त रेंडरिंग का उपयोग करना चाहते हैं कि तत्व दिखाई देना चाहिए या नहीं। गलत।
2. उस तत्व में एक ऑनक्लिक ईवेंट हैंडलर जोड़ें जो दृश्यता परिवर्तन को ट्रिगर करता है। इवेंट हैंडलर में, showElement स्टेट वेरिएबल को टॉगल करें।
3. तत्व को सशर्त रूप से प्रस्तुत करने के लिए रेंडर विधि में showElement स्टेट वेरिएबल का उपयोग करें। यदि showElement सत्य है, तो तत्व दिखाई देगा। यदि showElement गलत है, तो तत्व छिपा दिया जाएगा।
4. आप इसे कैसे कार्यान्वित कर सकते हैं इसका एक उदाहरण यहां दिया गया है:

class MyComponent React.Component का विस्तार करता है { कंस्ट्रक्टर(प्रॉप्स) { सुपर(प्रॉप्स); यह.राज्य = { showElement: गलत }; } toggleShowElement = () => { this.setState((prevState) => ({ showElement: !prevState.showElement })); }; प्रदान करना() { वापस करना ( ); } }

यह कोड स्निपेट MyComponent नामक एक नया रिएक्ट घटक बनाता है जो "हैलो वर्ल्ड!" टेक्स्ट के साथ एक div प्रस्तुत करता है। जब showElement स्थिति चर सत्य है। इसमें एक बटन भी शामिल है जो "हैलो वर्ल्ड!" की दृश्यता को चालू करता है। तत्व।