پاسخ هوش مصنوعی

در React.js، Props (کوتاه شده Properties) به عنوان راهی برای انتقال داده ها از یک کامپوننت به کامپوننت دیگر عمل می کنند. با استفاده از Props، می توان اطلاعاتی را از کامپوننت پدر به کامپوننت فرزند ارسال کرد. این ویژگی کمک می کند تا کامپوننت ها حالت و داده های خود را به صورت دینامیک مدیریت کنند.

از Props به طور معمول برای اهداف زیر استفاده می شود:

• انتقال داده ها: شما می توانید اطلاعاتی مانند متن، شماره، کالکشن یا هر نوع داده دیگری را به یک کامپوننت فرزند ارسال کنید.
• تنظیم کامپوننت ها: شما می توانید ویژگی های یک کامپوننت را با استفاده از Props تغییر دهید. به عنوان مثال، می توانید یک دکمه را قابل کلیک یا غیرفعال کنید.
• کاستوم سازی: می توانید کامپوننت ها را با استفاده از Props به گونه ای طراحی کنید که با ورودی های مختلف رفتار متفاوتی داشته باشند.

به عنوان مثال، یک کامپوننت ساده که Props را دریافت می کند:

import React from 'react';

const Greeting = ({ name }) => {
    return 
Hello, {name}!
;
};

export default Greeting;

در این مثال، نام به عنوان یک Prop به کامپوننت Greeting ارسال می شود. می توانید این کامپوننت را به صورت زیر استفاده کنید:

<Greeting name="Ali" />

این کد خروجی زیر را تولید می کند:

Hello, Ali!

به این ترتیب، 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 نمایش داده می شود.

موفق باشید