کاربرد props در React

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 به سراغ کاربرد props می رویم. اگر بخواهیم اطلاعاتی را به کامپوننت ارسال کنیم می توانیم از props استفاده کنیم در زیر چندین مثال آورده ایم تا براحتی با props و کاربرد آن آشنا شوید.

Props آرگومان هایی هستند که به React components منتقل می شوند.

Props از طریق ویژگی های HTML به کامپوننت ها منتقل می شود.

React Props

React Props مانند آرگومان های تابع در جاوا اسکریپت و ویژگی ها در HTML هستند.

برای ارسال props به یک کامپوننت، از همان نحوی که ویژگی های HTML استفاده می شود، استفاده کنید:

در مثال زیر یک ویژگی برند brand به عنصر Car اضافه می کنیم:

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
const myelement = <Car brand="Ford" />;
ReactDOM.render(myelement, document.getElementById('root'));

انتقال داده از یک کامپوننت

در مثال زیر مشاهده میکنید که در کامپوننت Car باید برند دریافت و نمایش داده شود.

در کامپوننت Garage، کامپوننت Car فراخوانی شده است و داده ای نیز ارسال می شود.

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));

همچنین می توانیم از روش های دیگری نیز داده دریافت کنیم. مثال زیر را مشاهده کنید.

یک شی به نام carInfo ایجاد کنید و آن را به کامپوننت Car ارسال کنید:

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));

توجه: React Props فقط خواندنی است! اگر بخواهید مقدار آنها را تغییر دهید با خطا مواجه خواهید شد.

در ادامه آموزش ری اکت به بقیه دستورات و مباحث آن می پردازیم.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید