Conditional और Optional Props
In this page:
function ComponentName({ requiredProp, optionalProp }) {
return (
<div>
{requiredProp}
{optionalProp && <span>{optionalProp}</span>}
{optionalProp ?? "fallback"}
</div>
);
}एक Optional Prop Handle करना
एक prop optional सिर्फ caller को इसे pass करने की ज़रूरत न रख कर होता है -- component के अंदर, आप इसे use करने से पहले check करते हैं कि यह exist करता है या नहीं, अक्सर एक default value या एक conditional check के साथ।
यह एक component को actually provided क्या था उसके आधार पर अपना behavior adapt करने देता है।
if checks की ज़रूरत न पड़े।props.user.name जब user pass नहीं हुआ) एक error throw करेगा।उदाहरण: Handling an Optional Prop
<!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 UserGreeting({ name, subtitle }) {
return (
<div>
<h2>Hello, {name}!</h2>
{subtitle && <p>{subtitle}</p>}
</div>
);
}
function App() {
return <div><UserGreeting name="Sam" subtitle="Welcome back" /><UserGreeting name="Alex" /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Props के आधार पर Conditionally Render करना
एक component वही conditional rendering techniques (ternaries, &&) जो पहले cover की गई हैं उपयोग करते हुए यह change कर सकता है कि क्या render करना है इसके आधार पर कि कौन से props pass किए गए थे।
यह उन components के लिए खासतौर पर useful है जो अलग situations में थोड़ा अलग UI दिखाते हैं, जैसे एक logged-in बनाम logged-out state।
उदाहरण: Conditionally Rendering Based on Props
<!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({ isError, message }) {
if (isError) {
return <p style={{color: "red"}}>Error: {message}</p>;
}
return <p style={{color: "green"}}>{message}</p>;
}
function App() {
return <div><StatusMessage isError={true} message="Failed to load" /><StatusMessage isError={false} message="All good" /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Fallback Content वाले Optional Props
कभी-कभी एक optional prop को missing होने पर कुछ भी नहीं के बजाय alternate fallback content दिखाना चाहिए। Ternary operator यहां अच्छे से काम करता है, आपको एक चीज़ render करने देते हुए जब prop present हो और कुछ और जब यह न हो।
props.value ?? 'default text' (nullish coalescing operator) का उपयोग missing values के लिए fallback content supply करने के एक concise तरीके के रूप में करें।?? के बजाय || उपयोग करना 0 या एक empty string जैसी legitimate falsy values पर misfire कर सकता है।उदाहरण: Optional Props with Fallback Content
<!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 ProfileBio({ bio }) {
return <p>{bio ? bio : "This user hasn't written a bio yet."}</p>;
}
function App() {
return <div><ProfileBio bio="I love building with React." /><ProfileBio /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- PropTypes/TypeScript से एक prop को required मार्क करना लेकिन फिर भी code लिखना जो मानता है कि यह missing हो सकता है।
- एक optional prop के लिए fallback provide न करना, जिससे access होने पर undefined होने पर crash होता है।
- हर single prop को optional बनाना भले ही कुछ genuinely component के sense बनाने के लिए हमेशा provided होने चाहिए।
- एक component जो हर prop accept करता है उसे required होने की ज़रूरत नहीं।
- Optional props के पास sensible defaults या safe fallback handling होनी चाहिए।
- एक component के अंदर conditional logic अक्सर इस पर depend करता है कि एक optional prop provided था या नहीं।
- Required बनाम optional props को clearly distinguish करना एक component को correctly use करना आसान बनाता है।
कोई browser-specific restrictions नहीं -- optional props standard JavaScript conditional logic पर rely करते हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: