logo
logo
تبلیغ کلیکی تاپ سایت 98

کاربرد props در React

کاربرد 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 فقط خواندنی است! اگر بخواهید مقدار آنها را تغییر دهید با خطا مواجه خواهید شد.

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

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98

منبع: w3schools

تگ: آموزش React

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.