Props Pass करना
Props एक component को दिए गए instructions जैसे हैं, उसे exactly बताते हुए क्या display करना है -- वैसे ही जैसे आप एक baker को बताते हैं कि cake पर क्या लिखना है।
Syntax
function ComponentName(props) {
return <element>{props.propName}</element>; // read-only
}
<ComponentName propName="text" otherProp={expression} />एक Single Prop Pass करना
Props एक component को उसी तरह pass किए जाते हैं जैसे आप एक HTML tag पर एक attribute set करते हैं: <Greeting name="Sam" />। Component के अंदर, वह value props object पर available है जो function argument के रूप में receive करता है।
Note:
Prop names camelCase convention follow करते हैं, बिल्कुल JSX attributes जैसे।
Warning:
Function के parameter के रूप में
props include करना भूल जाने का मतलब है आप कोई भी passed-in value access नहीं कर सकते।उदाहरण: Passing a Single 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 Greeting(props) {
return <p>Hello, {props.name}!</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
</script>
</body>
</html>Multiple Props Pass करना
एक component जितने भी props चाहिए receive कर सकता है, हर एक अपने own attribute के रूप में passed। वे सभी एक single props object के अंदर bundled together आते हैं, और आप हर एक को नाम से उस object से पढ़ते हैं।
Note:
अगर एक component को बहुत सारे props की ज़रूरत पड़ने लगे, तो विचार करें कि इसे छोटे components में split किया जाना चाहिए या नहीं।
Warning:
Calling side पर एक prop name में एक typo (जैसे
User के बजाय Usre) error throw नहीं करेगा -- यह बस silently undefined होगा।उदाहरण: Passing 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 UserCard(props) {
return <p>{props.name} is {props.age} years old.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserCard name="Alex" age={30} />);
</script>
</body>
</html>Props Read-Only हैं
एक component को उन values को कभी change नहीं करना चाहिए जो वह props के through receive करता है -- props एक-तरफा flow करते हैं, parent से child तक। अगर एक component को समय के साथ change होना है, तो वह change props को mutate करने के बजाय state से आना चाहिए।
Note:
Props को function arguments जैसे सोचें: आप उन्हें use करते हैं, लेकिन function के अंदर उन्हें reassign नहीं करते।
Warning:
एक component के अंदर
props.name = 'New Name' लिखना expected तरीके से काम नहीं करता और React के data flow rules को violate करता है।उदाहरण: Props Are Read-Only
<!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 Label(props) {
// props.text = "changed"; // Not allowed -- props are read-only
return <span>{props.text}</span>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Label text="Original text" />);
</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. #}
आम गलतियां
- Component के अंदर सीधे एक prop की value modify करने की कोशिश करना -- props read-only हैं।
- Props को correctly destructure या access करना भूल जाना, जैसे
nameके बजायprops.nameलिखना। - Component को expected name से अलग एक नाम वाला prop pass करना, इसलिए यह silently undefined render करता है।
चैप्टर सारांश
- Props एक parent component से एक child component तक pass किए गए inputs हैं।
- वे JSX में attributes के रूप में pass किए जाते हैं, HTML attributes के समान।
- Props read-only हैं -- एक component को कभी अपने खुद के props modify नहीं करना चाहिए।
- Props आपको components को reusable और configurable बनाने देते हैं।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- props एक core React data-flow concept है।
🔒
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: