پراپس (Props) در React.js چیست ؟

Component در react.js چیست

توی React.Js ما یه بحثی داریم به نام Component ها. از Component ها برای تقسیم صفحه به اجزای کوچکتر استفاده میشه. مثلا توی یک صفحه منو یک کامپوننت هست، فرم جستجو یک کامپوننت و بخش دسته بندی های سایت یک کامپوننت دیگه هست و به همین ترتیب سایر اجزا.

حالا موقعی که در یک پروزه از کامپوننت های استفاده میشه ممکنه حالات خاصی پیش بیاد و در واقع کامپوننت شما نیاز به ورودی داشته باشه. 

Props در react.js چیست

با توجه به توضیحات بالا میشه گفت Props ها همان ورودی های کامپوننت ها در react.Js هستند. برای اینکه این موضوع براتون مشخص تر بشه یک مثال رو بررسی می کنم.

به قطعه کد زیر دقت کنید

import React from 'react';

export const Message =()=>{
    return(
        <h1>
            Hi Ali
        </h1>
    )
}

قطعه کد بالا یک Component ساده به نام Message می باشد که تنها برای نمایش یک متن ساده به کار می رود. اگر ما در فایل App.js از این کامپوننت استفاده کنیم در خروجی عبارت Hi Ali رو میتونیم ببینیم که به صورت ثابت هست این عبارت.

اما حالا فرض کنید میخوایم هر کاربری نام خودش رو وارد کنه و بعد از اون در خروجی عبارت Hi و نام کاربر نمایش داده بشه. 

خب در این حالت باید از Props یا پراپس ها در React.Js استفاده کنیم.

قطعه کد زیر نحوه تعریف Props (پراپس) در React.Js رو نمایش میده به شما

import React from 'react';

export const Message =(propsVar)=>{
    return(
        <h1>
            Hi {propsVar.name} 
        </h1>
    )
}

خب قطعه کد بالا هم یک کامپوننت در React.Js هست. اما همونطوری که ملاحظه می کنید در ورودی این کامپوننت یک پارامتر به نام propsVar وجود داره. این یعنی این کامپوننت دارای یک پراپس هست. حالا اگر در بدنه کامپوننت نگاه کنید نوشته شده

Hi {propsVar.name} 

این یعنی موقع استفاده و فراخوانی این کامپوننت یک پراپس به نام name وجود داره که مقدار دهی میشه و به جای متغیر قرار میگیره.

حالا در ادامه و در قطعه کد زیر کدهای نوشته شده در فایل App.Js رو ببینید

import React from 'react';
import './App.css';
import {Message} from './components/Message';


const App=()=> {
  const handlerfunc=(name)=>{
    alert('clicked !!!' + name)
  }

  return (
    <div className="App">
      <div>
        <Message name="saeed"/>

      </div>
    </div>
  );
  }
export default App;

در قطعه کد بالا از پراپس در React.js استفاده شده. ابتدا کامپوننت Message فراخوانی شده و در تگ مربوطه هم یک پراپس به نام name تعریف و مقداردهی شده. پس در خروجی هم مقدار name نمایش داده می شود.

موفق باشید