React Native में Props क्या हैं?

Props (प्रॉपर्टीज) वे गुण हैं जो रिएक्ट कंपोनेंट को संशोधित करने में मदद करते हैं। बनाया गया कंपोनेंट props कॉन्सेप्ट का उपयोग करके विभिन्न पैरामीटर्स के साथ उपयोग किया जा सकता है। Props के साथ आप एक कंपोनेंट से दूसरे कंपोनेंट में जानकारी पास कर सकते हैं और साथ ही अपनी आवश्यकता के अनुसार कंपोनेंट को पुनः उपयोग कर सकते हैं।

यदि आप ReactJS से अच्छी तरह परिचित हैं तो आप props से परिचित होंगे, वही अवधारणाएं React Native में भी लागू होती हैं।

आइए एक उदाहरण देखते हैं जो बताता है कि props क्या हैं।

उदाहरण 1: रिएक्ट नेटिव बिल्ट-इन कंपोनेंट्स में Props

Image कंपोनेंट पर विचार करें:

style और source इमेज कंपोनेंट के लिए प्रॉपर्टीज यानी props हैं। style props का उपयोग स्टाइलिंग जोड़ने के लिए किया जाता है यानी चौड़ाई, ऊंचाई, आदि, और source props का उपयोग इमेज को प्रदर्शित करने के लिए यूआरएल असाइन करने के लिए किया जाता है। source और style इमेज कंपोनेंट के बिल्ट-इन props हैं।

आप एक वेरिएबल का भी उपयोग कर सकते हैं जो यूआरएल स्टोर करता है और इसे source props के लिए उपयोग कर सकते हैं जैसा कि नीचे दिखाया गया है:

let imgURI = {
    uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
    
        
    
);

नीचे दिया गया उदाहरण बिल्ट-इन props का उपयोग करके एक साधारण इमेज के प्रदर्शन को दर्शाता है:

import React from "react";
import { Image, Text, View, StyleSheet } from "react-native";
const MyImage = () => {
    let imgURI = {
        uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
    };
    return (
        
            
        
    );
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    }
});
export default MyImage;

उदाहरण 2: कस्टम कंपोनेंट में Props

आप एक कंपोनेंट से दूसरे कंपोनेंट में जानकारी भेजने के लिए props का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण में दो कस्टम कंपोनेंट बनाए गए हैं, Student और Subject।

Subject कंपोनेंट निम्नानुसार है:

const Subject = (props) => {
    return (
        
            I am studying - {props.name}!
        
    );
}

कंपोनेंट पैरामीटर्स props लेता है। इसका उपयोग Text कंपोनेंट के अंदर name को props.name के रूप में प्रदर्शित करने के लिए किया जाता है। आइए देखते हैं कि Student कंपोनेंट से Subject कंपोनेंट में props कैसे पास करें।

Student कंपोनेंट निम्नानुसार है:

const Student = () => {
    return (
        
            
            
            
        
    );
}

Student कंपोनेंट में Subject कंपोनेंट का उपयोग name props के साथ किया जाता है। पास किए गए मान Maths, Physics और Chemistry हैं। Subject को name props में अलग-अलग मान पास करके पुनः उपयोग किया जा सकता है।

यहाँ Student और Subject कंपोनेंट के साथ आउटपुट सहित एक कार्यशील उदाहरण है:

import React from 'react';
import { Text, View } from 'react-native';
const Subject = (props) => {
    return (
        
            I am studying - {props.name}! 
        
    );
}
const Student = () => {
    return (
        
            
            
            
        
    );
}
export default Student;

आउटपुट