প্রতিক্রিয়া নেটিভ মধ্যে প্রপস কি?

প্রপস এমন বৈশিষ্ট্য যা প্রতিক্রিয়া উপাদান পরিবর্তন করতে সাহায্য করে। প্রপস কনসেপ্ট ব্যবহার করে তৈরি করা উপাদানটি বিভিন্ন প্যারামিটারের সাথে ব্যবহার করা যেতে পারে। প্রপসের সাহায্যে আপনি একটি উপাদান থেকে অন্য উপাদানে তথ্য প্রেরণ করতে পারেন এবং একই সাথে আপনার প্রয়োজন অনুসারে উপাদানটি পুনরায় ব্যবহার করতে পারেন।

আপনি প্রপগুলির সাথে পরিচিত হবেন যদি আপনি ReactJS এর ​​সাথে ভালভাবে পারদর্শী হন, একই ধারণাগুলি প্রতিক্রিয়া নেটিভ-এ অনুসরণ করে৷

আসুন আমরা একটি উদাহরণ দেখি যা ব্যাখ্যা করে যে প্রপগুলি কী৷

উদাহরণ 1:নেটিভ বিল্ট-ইন কম্পোনেন্টের মধ্যে প্রপস

চিত্র উপাদানটি বিবেচনা করুন -

<Image
   style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png'}}
/>

স্টাইল এবং উৎস ইমেজ কম্পোনেন্টের জন্য প্রপস যেমন বৈশিষ্ট্য। স্টাইল প্রপস ব্যবহার করা হয় স্টাইলিং যোগ করার জন্য যেমন, প্রস্থ, উচ্চতা ইত্যাদি, এবং সোর্স প্রপ ব্যবহার করা হয় ব্যবহারকারীর কাছে দেখানোর জন্য ছবিতে ইউআরএল বরাদ্দ করতে। ইমেজ কম্পোনেন্টের উৎস এবং শৈলী এবং বিল্ড-ইন প্রপস।

আপনি একটি ভেরিয়েবল ব্যবহার করতে পারেন যা ইউআরএল সংরক্ষণ করে এবং নীচে দেখানো হিসাবে উত্স প্রপসের জন্য এটি ব্যবহার করতে পারে -

let imgURI = {
   uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

নীচের উদাহরণটি বিল্ট-ইন প্রপস -

ব্যবহার করে একটি সাধারণ চিত্রের প্রদর্শন দেখায়

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 (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   }
});
export default MyImage;

উদাহরণ 2:কাস্টম কম্পোনেন্টের ভিতরে প্রপস

আপনি এক উপাদান থেকে অন্য উপাদানে তথ্য পাঠাতে প্রপস ব্যবহার করতে পারেন। নীচের উদাহরণে দুটি কাস্টম উপাদান তৈরি করা হয়েছে, ছাত্র এবং বিষয়৷

বিষয় উপাদান নিম্নরূপ -

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

উপাদান পরামিতি প্রপস লাগে. নামটিকে props.name হিসাবে প্রদর্শন করতে এটি পাঠ্য উপাদানের ভিতরে ব্যবহার করা হয়। আসুন দেখি কিভাবে স্টুডেন্ট কম্পোনেন্ট থেকে সাবজেক্ট কম্পোনেন্টে প্রপস পাস করা যায়।

ছাত্র উপাদান নিম্নরূপ -

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

স্টুডেন্ট কম্পোনেন্টে সাবজেক্ট কম্পোনেন্ট নামের প্রপসের সাথে ব্যবহার করা হয়। পাস করা মানগুলি হল গণিত, পদার্থবিদ্যা এবং রসায়ন। নাম প্রপসে বিভিন্ন মান পাস করে বিষয় পুনরায় ব্যবহার করা যেতে পারে।

এখানে আউটপুট সহ স্টুডেন্ট এবং সাবজেক্ট কম্পোনেন্ট সহ একটি কার্যকরী উদাহরণ রয়েছে।

import React from 'react';
import { Text, View } from 'react-native';

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

আউটপুট