در این مقاله قصد داریم تا در مورد یک مفهوم مهم در React یعنی props صحبت کنیم. در ادامه یاد می‌گیریم که چگونه می‌توانیم از آن‌ها برای پویا نگه داشتن جریان داده در برنامه خود استفاده کنیم.

منظور از props در React چیست؟

در React برای انتقال داده‌ها از یک کامپوننت (کامپوننت parent) به کامپوننت دیگر (کامپوننت child) از props استفاده می‌کنیم. props یک راه کوتاه‌تر برای بیان ویژگی‌ها است. آن‌ها زمانی که می‌خواهیم جریان داده در برنامه ما به شکل پویا باشد، اهمیت زیادی پیدا می‌کنند و بسیار مفید هستند.

کامپوننت App.jsما به صورت زیر است:

function App() {
  return (
    <div className="App">
      
    </div>
  )
}

export default App

اکنون کامپوننت دیگری به نام Tool.jsایجاد می‌کنیم. این فایل شامل اطلاعاتی در مورد ابزار مورد علاقه طراح محصول است. بدون props، کد مورد نظر ما شبیه مثال زیر خواهد بود:

function Tool() {
    return (
      <div>
        <h1>My name is Ihechikara.</h1>
        <p>My favorite design tool is Figma.</p>
      </div>
    );
}

export default Tool

اکنون این کامپوننت را در کامپوننت Appکه داریم import می‌کنیم. یعنی:

import Tool from "./Tool"

function App() {
  return (
    <div className="App">
      <Tool/>
    </div>
  )
}

export default App

فرض کنید که کامپوننت Toolبرای توصیف طراحان مختلف و ابزارهای مورد علاقه آن‌ها به‌ کار برده می‌شود که قابلیت استفاده مجدد در کامپوننت‌های مختلف را دارد.

در حالی که React امکان import کردن منطق یک کامپوننت را بدون بازنویسی کد برای ما آسان‌تر کرده است، این کامپوننت خاص قبلاً داده‌های خود را به صورت ثابت کدگذاری می‌کند. این مفهوم به این معنی است که یا باید آن منطق را برای هر کامپوننت دیگر بازنویسی کنیم و یا این که از props برای تغییر داده‌های کامپوننت‌های مختلف استفاده کنیم.

اگر هنوز این مفهوم برای شما مبهم است باید بگوییم که props به ما اجازه می‌دهد تا از منطق یک کامپوننت به صورت پویا استفاده مجدد کنیم. یعنی این که داده‌های کامپوننت ثابت نخواهد بود. بنابراین هر کامپوننت دیگری می‌تواند از آن منطق استفاده ‌کند و داده‌های آن را مطابق با نیازهایی که دارد تغییر دهد.

نحوه استفاده از props در React

در این قسمت با دو روش استفاده از props آشنا می‌شویم: یکی بدون destructuring و دیگری با destructuring.

نحوه استفاده از props بدون destructuring

برای استفاده از props، باید آن را به عنوان آرگومان در تابع خود ارسال کنیم. این مفهوم شبیه به انتقال آرگومان‌ها بین توابع در جاوااسکریپت معمولی است. به عنوان مثال:

function Tool(props) {
  const name = props.name;
  const tool = props.tool;
    return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );
}

export default Tool

اکنون تمام آنچه را که در مثال بالا اتفاق می‌افتد را مرحله به مرحله باهم بررسی می‌کنیم.

مرحله اول – ارسال props به عنوان آرگومان

ما ارسال props به عنوان آرگومان را در خط اول و در کد function Tool(props){}انجام دادیم. این کار به طور خودکار این امکان را به ما می‌دهد تا از props در کامپوننت‌های دیگر برنامه React خود استفاده کنیم.

مرحله دوم – تعریف متغیرهای props

در کامپوننت Tool.jsمتغیرهای مورد نظرمان را تعریف می‌کنیم:

const name = props.name;
const tool = props.tool;

همانطور که می‌بینید، این متغیرها با متغیرهای معمولی متفاوت هستند، زیرا داده‌های موجود در آن‌ها به props مربوط می‌شوند.

اگر تمایلی به ایجاد متغیر برای propsها نداشته باشیم می‌توانیم به صورت مستقیم از آن‌ها استفاده کنیم، مثلا : <h1> My name is {props.name} </h1>.

مرحله سوم – استفاده از متغیرها در قالب JSX

اکنون که متغیرهای مورد نظر خود را تعریف کرده‌ایم می‌توانیم از آن‌ها در هر قسمتی از کد استفاده کنیم. مثلا:

return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );

مرحله چهارم – انتقال داده‌ها را به props در کامپوننت App

ما ساختن props را تمام کرده‌ایم، بنابراین گام بعدی این است که داده‌ها را به آن‌ها منتقل کنیم. قبلا کامپوننت Toolرا import کرده‌ایم و در حال حاضر در مرورگر نمایش داده می‌شود که خروجی به شکل زیر است:

My name is .
My favorite design tool is .

همچنین می‌توانیم داده‌های پیش‌فرضی را برای propsها ایجاد کنیم تا در هنگام تعریف کردن آن‌ها خالی نباشند. نحوه انجام این کار را در بخش آخر خواهیم دید.

state فعلی کامپوننت Appبه صورت زیر است:

import Tool from "./Tool"

function App() {
  return (
    <div className="App">
      <Tool/>
    </div>
  )
}

export default App

اکنون ممکن است تعجب کنید که داده‌ها دقیقاً به کجا ارسال می‌شوند. برای انجام این کار داده‌ها را همانند ویژگی‌ها مقداردهی می‌کنیم. مثلا:

import Tool from "./Tool"

function App() {
  return (
    <div className="App">
      <Tool name="Ihechikara" tool="Figma"/>
    </div>
  )
}

export default App

به تغییری که اتفاق افتاد توجه کنید. <Tool/>به <Tool name="Ihechikara" tool="Figma"/>تبدیل شده است و این موضوع باعث ایجاد خطا نمی‌شود زیرا این ویژگی‌ها به propsهای ایجاد شده در کامپوننت Toolمتصل هستند.

اکنون خروجی در مرورگر به شکل زیر خواهد بود:

My name is Ihechikara.
My favorite design tool is Figma.

باید به این موضوع توجه داشته باشیم که نام متغیر به خودی خود prop نیست. اگر یک متغیر به شکل const myPropName = props.nameایجاد می‌کردیم و آن را به صورت <h1>My name is {myPropName}</h1>به‌کار می‌بردیم باز هم کد ما، همانند زمانی که به شکل <Tool name="Ihechikara" tool="Figma"/>نوشتیم، به درستی کار می‌کرد.

اکنون با استفاده از منطق تعریف شده در کامپوننت Toolمی‌توانیم داده‌ها را به صورت پویا برای هر کامپوننت دیگری ایجاد کنیم.

در مرحله بعد، نحوه استفاده از propsها با destructuring را بررسی خواهیم کرد.

نحوه استفاده از props با destructuring

کد نویسی این بخش به غیر از روش تعریف props، کاملاً مشابه بخش آخر است. اگر با چگونگی استفاده از  destructuring در جاوااسکریپت آشنا نیستید، پیشنهاد می‌کنیم این مقاله را بررسی کنید.

در بخش قبل، ما props را به شکل زیر تعریف کردیم:

const name = props.name;
const tool = props.tool;

اما همراه با destructuring نیازی به انجام این کار نیست. به این ترتیب می‌توانیم به سادگی از روش زیر استفاده کنیم:

function Tool({name, tool}) {
  
    return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );
}

export default Tool

تنها تفاوت در خط اول کد است. به جای اینکه props را به عنوان آرگومان ارسال کنیم، متغیرها را به عنوان آرگومان تابع destruct کرده و ارسال می‌کنیم. بقیه موارد همانند قبل است.

باید به این نکته توجه داشته باشیم که فقط به متغیرهای منفرد به عنوان داده‌های props محدود نمی‌شویم بلکه می‌توانیم توابع و یا حتی داده‌ها را از آبجکت‌ها نیز ارسال کنیم.

تنظیم مقادیر پیش‌فرض برای props

اگر نمی‌خواهیم داده‌های props هنگام ایجاد آن‌ها خالی باشد، می‌توانیم مقادیر پیش‌فرضی را برای آن‌ها درنظر بگیریم. در این بخش نحوه انجام این کار بررسی می‌کنیم. مثلا:

function Tool({name, tool}) {

    return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );

  }
  
  Tool.defaultProps = {
    name: "Designer",
    tool: "Adobe XD"
  }
export default Tool

در مثال بالا در قسمت انتهایی کد قبل از اینکه کامپوننت export شود، مقادیر پیش فرض را برای props تعریف کردیم. این کار را با نام کامپوننت، یک . و defaultProps که هنگام ایجاد یک برنامه React ساخته می‌شود، شروع کردیم. سپس مقداردهی اولیه را انجام دادیم.

اکنون هر جا که این کامپوننت را import کنیم، آن مقادیر به جای خالی بودن، دارای مقادیر اولیه و پیش‌فرض خواهند بود. هنگامی که داده‌ها را مانند بخش‌های قبلی به کامپوننت child ارسال می‌کنیم، مقادیر جدید این مقادیر پیش‌فرض را لغو کرده و جایگزین آن‌‌ها می‌شوند.

جمع‌بندی

در این مقاله همه مفاهیمی که برای شروع استفاده از propsها و انتقال داده‌ها به صورت پویا در کامپوننت‌های خود نیاز داریم را مورد بررسی قرار دادیم. اما باید به خاطر داشته باشیم که بهترین راه برای درک این مفاهیم، تمرین و تکرار و ساختن برنامه‌های مختلف با آن‌ها است.