Conditional Rendering कैसे करें
Conditional rendering React का एक yes-or-no question के आधार पर यह decide करना है कि क्या दिखाना है, एक light switch जैसा जो lamp को सिर्फ तब on करता है जब dark हो।
In this page:
Syntax
{condition ? <ElementA /> : <ElementB />}
{condition && <Element />}
if (!condition) return null;Either/Or Output के लिए एक Ternary Use करना
condition ? A : B ternary operator JSX में एक condition के आधार पर दो चीज़ों में से एक render करने का standard तरीका है।
Note:
JSX में ternaries को छोटा रखें -- अगर branches लंबे हो जाएं तो return से ऊपर एक variable में result compute करें।
Warning:
एक के अंदर एक कई ternaries को nest करना जल्दी unreadable हो जाता है -- return से ऊपर एक if/else, या एक early return, अक्सर clearer होता है।
उदाहरण: Using a Ternary for Either/Or Output
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function StatusMessage() {
const isOnline = true;
return <p>{isOnline ? 'You are online' : 'You are offline'}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<StatusMessage />);
</script>
</body>
</html>कुछ या कुछ नहीं Render करने के लिए && Use करना
condition && <Element /> element को सिर्फ तब render करता है जब condition true हो; जब यह false हो, JSX उस expression के लिए कुछ भी render नहीं करता।
Note:
&& ideal है जब कोई else case न हो -- आप या तो कुछ दिखाते हैं या कुछ नहीं दिखाते।
Warning:
condition && <Element /> literal number 0 render कर देता है (page पर visible!) अगर condition एक असली boolean के बजाय number 0 हो -- इससे बचने के लिए पहले एक boolean में convert करें (!!count)।
उदाहरण: Using && to Render Something or Nothing
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Badge() {
const unread = 3;
return (
<div>
<p>Inbox</p>
{unread > 0 && <span> ({unread} unread)</span>}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Badge />);
</script>
</body>
</html>कुछ भी Render न करने के लिए null Return करना
एक component JSX के बजाय null return कर सकता है कुछ भी render न करने के लिए -- useful जब एक component को कभी-कभी UI में नहीं दिखना चाहिए।
Note:
null return करना एक empty string return करने से अलग है -- दोनों कुछ भी visible render नहीं करते, लेकिन null conventional choice है।
Warning:
null से पहले return keyword भूल जाना function को undefined return करता रहने देता है, जो cleanly render होने के बजाय एक React error trigger करता है।
उदाहरण: Returning null to Render Nothing
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MaybeMessage() {
const show = false;
if (!show) {
return null;
}
return <p>You will not see this.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<MaybeMessage />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
&&को एक falsy number (जैसे 0) के साथ उपयोग करना, जो accidentally page पर एक stray0render कर सकता है।- JSX curly braces के अंदर directly पूरे if/else blocks लिखना, जो valid नहीं है।
- यह भूल जाना कि ternary operator को दोनों true और false branch चाहिए,
&&के विपरीत।
चैप्टर सारांश
- Conditional rendering normal JavaScript उपयोग करके एक condition के आधार पर अलग UI दिखाता है।
- Ternary operator (
condition ? a : b) दो JSX outputs के बीच चुनता है। &&operator सिर्फ तब कुछ render करता है जब एक condition true हो, नहीं तो कुछ नहीं।- JSX के अंदर काम करने के लिए Conditions को expressions होना चाहिए, statements नहीं।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- यह standard JavaScript operators पर rely करता है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: