रिएक्ट में सशर्त प्रतिपादन आपको कुछ शर्तों, जैसे राज्य या प्रॉप्स के आधार पर विभिन्न घटकों या तत्वों को प्रस्तुत करने की अनुमति देता है। सशर्त प्रतिपादन प्राप्त करने के लिए यहां कुछ सामान्य तरीके दिए गए हैं:

1. यदि अन्यथा कथनों का उपयोग करना

आप अपने घटक के अंदर मानक जावास्क्रिप्ट इफ-एल्स स्टेटमेंट का उपयोग कर सकते हैं।

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. टर्नरी ऑपरेटर्स का उपयोग करना

यह किसी शर्त के आधार पर सामग्री प्रस्तुत करने का एक संक्षिप्त तरीका है।

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. लॉजिकल && ऑपरेटर का उपयोग करना

आप किसी घटक को प्रस्तुत करने के लिए तार्किक AND ऑपरेटर का उपयोग केवल तभी कर सकते हैं जब कोई शर्त सत्य हो।

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. स्विच स्टेटमेंट

अधिक जटिल स्थितियों के लिए, आप स्विच स्टेटमेंट का उपयोग कर सकते हैं।

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

उदाहरण

कार्यात्मक घटकों का उपयोग करके यहां एक पूर्ण उदाहरण दिया गया है:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

सारांश

आपकी स्थितियों की जटिलता और आपकी व्यक्तिगत कोडिंग शैली के आधार पर वह विधि चुनें जो आपकी आवश्यकताओं के लिए सबसे उपयुक्त हो। यदि आपको अधिक उदाहरणों या स्पष्टीकरणों की आवश्यकता हो तो मुझे बताएं!