कंडीशनल रेंडरिंग से तात्पर्य किसी ऐप के व्यवहार को उसकी स्थिति के आधार पर बदलने से है। उदाहरण के लिए, आप रात के दौरान अपने रिएक्ट ऐप के ग्रीटिंग मैसेज को डार्क में बदल सकते हैं। इस तरह आपके पास दिन के समय के आधार पर एक अलग प्रदर्शन संदेश होता है।

सशर्त प्रतिपादन आपको विभिन्न प्रतिक्रिया घटकों या तत्वों को प्रस्तुत करने की अनुमति देता है यदि कोई शर्त पूरी होती है। इस ट्यूटोरियल में, आप उन विभिन्न तरीकों के बारे में जानेंगे जिनसे आप React.js एप्लिकेशन में कंडीशनल रेंडरिंग का उपयोग कर सकते हैं।

सशर्त प्रतिपादन को लागू करने के तरीके

इन उदाहरणों का अनुसरण करने के लिए, आपको रिएक्ट कैसे काम करता है, इसकी बुनियादी समझ होनी चाहिए। यदि आप उस उदाहरण में संघर्ष कर रहे हैं, तो चिंता न करें—हमारे पास एक उपयोगी है React.js के लिए शुरुआती गाइड.

सशर्त बयानों का उपयोग करना

जावास्क्रिप्ट की तरह, आप कुछ शर्तों के पूरा होने पर तत्व बनाने के लिए सशर्त बयान जैसे if…else का उपयोग कर सकते हैं।

उदाहरण के लिए, आप में एक निर्दिष्ट तत्व प्रदर्शित कर सकते हैं अगर जब कोई शर्त पूरी हो जाती है तो ब्लॉक करें और उसमें एक अलग प्रदर्शित करें अन्य शर्त पूरी नहीं होने पर ब्लॉक करें।

निम्नलिखित उदाहरण पर विचार करें जो उपयोगकर्ता की लॉगिन स्थिति के आधार पर या तो लॉगिन या लॉगआउट बटन प्रदर्शित करता है।

फंक्शन डैशबोर्ड (प्रॉप्स) {
 कॉन्स्ट {isLoggedIn} = प्रॉप्स
 अगर (लॉग इन किया गया है) {
 वापसी लॉग आउट
 } अन्य{
 वापसी लॉग इन करें
 }
}

यह फ़ंक्शन के आधार पर एक अलग बटन प्रस्तुत करता है लॉग इन है मूल्य एक प्रोप के रूप में पारित किया गया।

संबंधित: ReactJS में प्रॉप्स का उपयोग कैसे करें

वैकल्पिक रूप से, आप टर्नरी ऑपरेटर का उपयोग कर सकते हैं। टर्नरी ऑपरेटर एक शर्त लेता है जिसके बाद कोड निष्पादित होता है यदि स्थिति है सचाई कोड के बाद निष्पादित करने के लिए यदि शर्त है झूठा.

उपरोक्त फ़ंक्शन को इस प्रकार फिर से लिखें:

फंक्शन डैशबोर्ड (प्रॉप्स) {
 कॉन्स्ट {isLoggedIn} = प्रॉप्स
 वापसी (
 <>
 {लॉग किया गया है?लॉग आउट:लॉग इन करें)
 )
}

टर्नरी ऑपरेटर की तुलना में फंक्शन को साफ और पढ़ने में आसान बनाता है यदि नहीं तो बयान।

तत्व चर घोषित करना

एलीमेंट वेरिएबल वेरिएबल हैं जो JSX एलिमेंट को होल्ड कर सकते हैं और रिएक्ट ऐप में आवश्यकता पड़ने पर रेंडर किया जा सकता है।

जब आपका एप्लिकेशन निर्दिष्ट शर्त को पूरा करता है तो आप घटक के केवल एक निश्चित भाग को प्रस्तुत करने के लिए तत्व चर का उपयोग कर सकते हैं।

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

समारोह लॉगिनबीटीएन (प्रॉप्स) {
 वापसी (

 लॉग इन करें

 );
}
समारोह लॉगआउटबीटीएन (प्रॉप्स) {
 वापसी (

 लॉग आउट

 );
}
फ़ंक्शन डैशबोर्ड () {
 कॉन्स्ट [लॉग इन, सेटलॉग इन] = यूज़स्टेट (सच)
 कॉन्स्ट हैंडललॉगिन = () => {
 सेट लॉग इन (सच)
 }
 कॉन्स्ट हैंडल लॉगआउट = () => {
 सेटलॉग इन (झूठा)
 }
 चलो बटन;
 अगर (लॉग इन) {
 बटन = 
 } अन्य {
 बटन = 
 }
 वापसी (
 <>
 {में लॉग इन}
 )
}

उपरोक्त कोड में, पहले लॉगिन और लॉगआउट बटन घटकों को बनाया, फिर परिभाषित करें उनमें से प्रत्येक को विभिन्न स्थितियों पर प्रस्तुत करने के लिए घटक।

इस घटक में, उपयोगकर्ता के लॉग इन होने पर नज़र रखने के लिए रिएक्ट स्टेट हुक का उपयोग करें।

संबंधित: इन अतिरिक्त हुकों को सीखकर अपनी प्रतिक्रिया कौशल में महारत हासिल करें

अब, राज्य के आधार पर या तो प्रस्तुत करें या अवयव।

यदि उपयोगकर्ता लॉग इन नहीं है, तो प्रस्तुत करें घटक अन्यथा प्रस्तुत करेंइ अवयव। जब संबंधित बटन पर क्लिक किया जाता है तो दो हैंडल फ़ंक्शन लॉगिन स्थिति बदलते हैं।

तार्किक ऑपरेटरों का उपयोग करना

आप तार्किक का उपयोग कर सकते हैं && एक तत्व को सशर्त रूप से प्रस्तुत करने के लिए ऑपरेटर। यहां एक तत्व केवल तभी प्रस्तुत किया जाता है जब स्थिति सत्य का मूल्यांकन करती है अन्यथा इसे अनदेखा कर दिया जाता है।

यदि आप किसी उपयोगकर्ता को सूचनाओं की संख्या के बारे में सूचित करना चाहते हैं, जब उनके पास एक या अधिक सूचनाएं हों, तो आप निम्न का उपयोग कर सकते हैं।

फंक्शन शो नोटिफिकेशन (प्रॉप्स) {
 कॉन्स्ट {सूचनाएं} = सहारा
 वापसी (
 <>
 {सूचनाएं.लंबाई> 0 &&

 आपके पास {सूचनाएं.लंबाई} सूचनाएं हैं।


 }
 )
}

अगला, किसी तत्व को प्रस्तुत करने के लिए यदि तार्किक && अभिव्यक्ति एक गलत मान का मूल्यांकन करती है, तो तार्किक को श्रृंखलाबद्ध करें || ऑपरेटर।

यदि कोई सूचना प्रोप के रूप में पारित नहीं की जाती है, तो निम्न फ़ंक्शन "आपके पास कोई सूचना नहीं है" संदेश प्रदर्शित करता है।

फंक्शन शो नोटिफिकेशन (प्रॉप्स) {
 कॉन्स्ट {सूचनाएं} = सहारा
 वापसी (
 <>
 {सूचनाएं.लंबाई> 0 &&

 आपके पास {सूचनाएं.लंबाई} सूचनाएं हैं।
 || 
आपके पास कोई सूचना नहीं है

 }
 )
}

एक घटक को प्रतिपादन से रोकें

एक घटक को छिपाने के लिए, भले ही इसे किसी अन्य घटक द्वारा प्रस्तुत किया गया हो, इसके आउटपुट के बजाय अशक्त लौटें।

निम्नलिखित घटक पर विचार करें जो केवल एक चेतावनी बटन प्रस्तुत करता है यदि एक चेतावनी संदेश को सहारा के रूप में पारित किया जाता है।

समारोह चेतावनी (प्रॉप्स) {
 कास्ट {चेतावनी संदेश} = सहारा
 अगर (!चेतावनी संदेश) {
 वापसी शून्य
 }
 वापसी (
 <>
चेतावनी
 )
}

अब, यदि आप 'चेतावनी संदेश' में पास करते हैं घटक, एक चेतावनी बटन प्रदान किया जाएगा। हालाँकि, यदि आप नहीं करते हैं, शून्य वापस आ जाएगा और बटन प्रदर्शित नहीं किया जाएगा।

 // चेतावनी बटन प्रदान किया जाता है
 // चेतावनी बटन प्रदान नहीं किया गया है

वास्तविक जीवन प्रतिक्रिया अनुप्रयोगों में सशर्त प्रतिपादन के उदाहरण

अपने आवेदन में विभिन्न कार्यों को पूरा करने के लिए सशर्त प्रतिपादन का प्रयोग करें। उनमें से कुछ में केवल तभी उपलब्ध होने पर एपीआई डेटा प्रस्तुत करना और एक त्रुटि संदेश प्रदर्शित करना शामिल है जब कोई त्रुटि मौजूद हो।

प्रतिक्रिया में एक एपीआई से प्राप्त डेटा प्रस्तुत करना

किसी API से डेटा प्राप्त करने में कुछ समय लग सकता है। इसलिए, पहले, जांच लें कि यह आपके एप्लिकेशन में उपयोग करने से पहले उपलब्ध है या नहीं, अन्यथा रिएक्ट एक त्रुटि देगा यदि यह उपलब्ध नहीं है।

निम्न फ़ंक्शन दिखाता है कि आप किसी API द्वारा लौटाए गए डेटा को सशर्त रूप से कैसे प्रस्तुत कर सकते हैं।

फ़ंक्शन FetchData () {
 कॉन्स्ट [डेटा, सेटडेटा] = यूज़स्टेट (अशक्त);
 कॉन्स्ट एपीआईयूआरएल = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Axios का उपयोग करके API से डेटा प्राप्त करें
 कॉन्स्ट फ़ेचडाटा = एसिंक्स () => {
 कॉन्स प्रतिक्रिया = axios.get प्रतीक्षा करें (apiURL)
 // डेटा के साथ स्थिति अपडेट करें
 सेटडेटा (प्रतिक्रिया। डेटा) 
 }
 वापसी (
 <>
दिन की खगोल विज्ञान तस्वीर

 {
 आंकड़े && 
{डेटा.शीर्षक}

{डेटा.स्पष्टीकरण}

 }
 )
}

उपरोक्त फ़ंक्शन में, से डेटा प्राप्त करें नासा अपोड एपीआई Axios का उपयोग करना। जब एपीआई एक प्रतिक्रिया देता है, तो स्थिति को अपडेट करें और तार्किक && ऑपरेटर का उपयोग केवल डेटा उपलब्ध होने पर ही प्रस्तुत करने के लिए करें।

संबंधित: फ़ेच और एक्सियोस का उपयोग करके प्रतिक्रिया में एपीआई का उपभोग कैसे करें

त्रुटि संदेश प्रदर्शित करना

ऐसे मामलों में जहां आप त्रुटि के मौजूद होने पर ही उसे प्रदर्शित करना चाहते हैं, सशर्त रेंडरिंग का उपयोग करें।

उदाहरण के लिए, यदि आप एक फॉर्म बना रहे हैं और एक त्रुटि संदेश प्रदर्शित करना चाहते हैं यदि उपयोगकर्ता ने गलत ईमेल प्रारूप में टाइप किया है, तो त्रुटि संदेश के साथ स्थिति को अपडेट करें और इसे प्रस्तुत करने के लिए एक कथन का उपयोग करें।

फ़ंक्शन शो एरर () {
 कॉन्स्ट [त्रुटि, सेटएरर] = यूज़स्टेट (अशक्त)
 वापसी (
 <>
 {
 अगर (त्रुटि) {
एक त्रुटि हुई: {त्रुटि}

 }
 }
 )
}

अपने रिएक्ट ऐप में क्या उपयोग करना है यह चुनना

इस ट्यूटोरियल में, आपने कई तरीकों के बारे में सीखा जो JSX तत्वों को सशर्त रूप से प्रस्तुत कर सकते हैं।

चर्चा की गई सभी विधियां समान परिणाम प्रदान करती हैं। उपयोग के मामले और आप जिस पठनीयता को प्राप्त करना चाहते हैं, उसके आधार पर क्या उपयोग करना है, इस पर चुनाव करें।

प्रतिक्रिया सीखने और वेब ऐप्स बनाने के लिए 7 सर्वश्रेष्ठ मुफ्त ट्यूटोरियल

नि: शुल्क पाठ्यक्रम शायद ही कभी व्यापक और सहायक होते हैं - लेकिन हमने कई रिएक्ट पाठ्यक्रम पाए हैं जो उत्कृष्ट हैं और आपको दाहिने पैर पर शुरू कर देंगे।

आगे पढ़िए

लेखक के बारे में