Default Props सेट करना
In this page:
function ComponentName({ propName = defaultValue, other = defaultValue }) {
return <element>{propName}</element>;
}JS Default Parameters से एक Default Set करना
Function components एक prop के लिए एक fallback value provide करने के लिए standard JavaScript default parameter syntax use कर सकते हैं। अगर caller वह prop pass नहीं करता, default automatically use होता है -- किसी extra configuration की ज़रूरत नहीं।
function Greeting({ name = "Guest" })।undefined values के लिए kick in करते हैं -- explicitly null pass करना default trigger नहीं करेगा।उदाहरण: Setting a Default with JS Default Parameters
<!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 Greeting({ name = "Guest" }) {
return <p>Hello, {name}!</p>;
}
function App() {
return <div><Greeting name="Alex" /><Greeting /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Default Props क्यों मायने रखते हैं
Sensible defaults provide करने का मतलब है एक component reasonably behave करता है भले ही हर prop specify किए बिना quickly use किया जाए। यह bugs कम करता है और एक component को codebase भर में reuse करना ज़्यादा pleasant बनाता है, क्योंकि callers को हर optional setting याद नहीं रखनी पड़ती।
उदाहरण: Why Default Props Matter
<!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 Button({ label = "Click me", type = "button" }) {
return <button type={type}>{label}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Button />);
</script>
</body>
</html>Multiple Props के लिए Defaults
आप एक ही function signature में जितने भी destructured props चाहिए उन्हें default values दे सकते हैं। हर prop का default independent है -- एक caller बाकी के लिए defaults पर rely करते हुए भी सिर्फ एक को override कर सकता है।
उदाहरण: Defaults for Multiple 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 Avatar({ size = 40, alt = "User avatar" }) {
return <div style={{width: size, height: size, background: "#ccc", borderRadius: "50%"}} title={alt} />;
}
function App() {
return <div><Avatar /><Avatar size={80} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- यह मान लेना कि default parameter values सिर्फ class components के साथ काम करती हैं -- वे function components के साथ भी बढ़िया काम करती हैं।
- एक default value set करना लेकिन फिर भी explicitly
undefinedpass करना, जो फिर भी default trigger करता है (यह expected है, लेकिन अक्सर surprising)। - यह भूल जाना कि
null(न किundefined) pass करना default value trigger नहीं करता।
- Default values सुनिश्चित करते हैं कि एक component sensible behavior रखे भले ही एक prop pass न किया जाए।
- Function components में, JavaScript का default parameter syntax इसे directly handle करता है।
- एक default सिर्फ तब apply होता है जब prop
undefinedहो, न कि जब यहnullया एक empty string हो। - Defaults components को ज़्यादा robust और use करना आसान बनाते हैं।
कोई browser-specific restrictions नहीं -- standard JavaScript default parameters उपयोग करता है, जो ES6 से available हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: