Props হলো প্রপার্টিজ যা React কম্পোনেন্ট মডিফাই করতে সাহায্য করে। তৈরি করা কম্পোনেন্টটি প্রপস কনসেপ্ট ব্যবহার করে ভিন্ন ভিন্ন প্যারামিটারসহ ব্যবহার করা যায়। প্রপস দিয়ে আপনি একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে তথ্য পাস করতে পারেন এবং একই সাথে 요구 অনুযায়ী কম্পোনেন্টটি রি-ইউজ করতে পারেন।
ReactJS-এ প্রপস থেকে পরিচিত থাকলে React Native-এও একই কনসেপ্ট ফলো করে।
প্রপস কী তা বোঝाने একটি উদাহরণ দেখি।
উদাহরণ ১: React Native বিল্ট-ইন কম্পোনেন্টে Props
Image কম্পোনেন্ট বিবেচনা করুন:
style এবং source হলো Image কম্পোনেন্টের প্রপার্টিজ অর্থাৎ props। style প্রপস স্টাইলিং যোগ করতে (width, height, ইত্যাদি) ব্যবহৃত হয়, আর source প্রপস ইমেজের URL অ্যাসাইন করতে ব্যবহৃত হয় যাতে ইউজারকে দেখানো যায়। source এবং style Image কম্পোনেন্টের বিল্ট-ইন প্রপস।
আপনি একটি ভ্যারিয়েবলও ব্যবহার করতে পারেন যা URL সংরক্ষণ করে এবং সেটি source প্রপসে ব্যবহার করতে পারেন নিচের মতো:
let imgURI = {
uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
);
নিচের উদাহরণটি বিল্ট-ইন প্রপস ব্যবহার করে একটি সিম্পল ইমেজ ডিসপ্লে দেখাবে:
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;
উদাহরণ ২: কাস্টম কম্পোনেন্টে Props
আপনি প্রপস ব্যবহার করে একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে তথ্য পাস করতে পারেন। নিচের উদাহরণে দুটি কাস্টম কম্পোনেন্ট তৈরি করা হয়েছে: Student এবং Subject।
Subject কম্পোনেন্টটি নিচের মতো:
const Subject = (props) => {
return (
I am studying - {props.name}!
);
}
কম্পোনেন্টটি props প্যারামিটার নেয়। Text কম্পোনেন্টে props.name ব্যবহার করে নাম ডিসপ্লে করা হয়। এখন দেখি Student কম্পোনেন্ট থেকে Subject কম্পোনেন্টে প্রপস কীভাবে পাস করা হয়।
Student কম্পোনেন্টটি নিচের মতো:
const Student = () => {
return (
);
}
Student কম্পোনেন্টে Subject কম্পোনেন্ট name প্রপস সহ ব্যবহার করা হয়েছে। পাস করা ভ্যালুগুলো: Maths, Physics এবং Chemistry। Subject কম্পোনেন্টটি name প্রপসে ভিন্ন ভ্যালু পাস করে রি-ইউজ করা হয়েছে।
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;
আউটপুট
