همه چیز در مورد Props و PropTypes در React

در این مطلب یاد میگیرید که Props دقیقا چه چیزی هست و چه کاربردی دارد و چطور میتونین با استفاده از PropTypes همون داده‌هایی که نیاز دارید رو در اختیار Component قرار بدین و نوع یا Type اطلاعات رو بررسی کنید. پس با ما همراه باشید تا با کاربرد Props و PropTypes در React آشنا بشید.

React توسعه‌دهندگان رو تشویق میکنه که که رابط‌کاربری یا User interface سایتشون رو شکسته و اون رو به Component‌های کوچکتر تبدیل کنند. وقتی که اینکار رو انجام میدیم Component‌های زیادی به وجود میاد. پس یک راه باید وجود داشته باشه که بتونیم با استفاده از اون اطلاعات و داده‌ها رو بین Component‌ها رد و بدل کنیم. در بیشتر موارد این رد و بدل از سمت Component پدر یا Parent به Child یا فرزند هست.

React به اطلاعاتی که بین Component‌ها رد و بدل میکنیم، Props میگه و در این مطلب میخوایم با جزئیات بیشتری اون رو یاد بگیریم. وقتی که بحث از Props میشه، بهتره که نوع اونا رو هم مشخص کنیم تا داده‌های درستی به Component ما برسه. به همین دلیل از PropTypes برای اینکار استفاده میکنیم. در این مطلب اطلاعات کاملی در مورد Props و PropTypes در React در اختیارتون قرار میگیره.

Props: اطلاعاتی که بین Component‌ها جابجا میشن

یکی از دلایلی که React معروف شده و خیلی‌ها از اون استفاده میکنن، اینه که میتونین اون رو به Component‌های کوچک کوچک شکسته و با استفاده از Props بین اونا ارتباط برقرار کنید. پس یکی از مهمترین مزایای React، بحث Props است. وقتی از Component‌ها استفاده میکنیم و یک صفحه رو باز میکنیم، فقط اون اطلاعات و Component هایی نشون داده میشه که مورد نیاز هستند و چیزی بیشتر نشون داده نمیشه و این ویژگی باعث میشه که Performance بالاتر بره.

اطلاعات و داده‌ها میتونن در انواع مختلفی مثل String یا Array یا ... باشن. در ادامه نحوه پاس دادن و گرفتن Props به Component رو بهتون آموزش میدیم.

پاس دادن و دسترسی به Props

فرض کنید که بخوایم یک اپلیکیشن ساده که یک لیستی از دموهای زیبای سایت Codepen رو نشون میده، درست کنیم. ما میتونیم برنامه خودمون رو به Component‌های کوچکتری بشکونیم. بصورت زیر:

همونطور که میبینید 2 کامپوننت PenList و Pen در تصویر قرار داده شده است. PenList یک لیست از pen‌ها رو در خودش جا میده و Pen هم ساختار مربوط به هر pen رو تعریف میکنه.

در ابتدا به اطلاعات مربوط به pen‌ها نیاز داریم. فرض کنیم که اطلاعات بصورت زیر باشن:

const pensList = [
  {
    title: "Elastic Input[Google Chrome]",
    url: "https://codepen.io/andreasstorm/pen/JBGWBa",
    author: "Andreas Storm"
  },
  {
    title: "Phenomenon instances!",
    url: "https://codepen.io/cvaneenige/pen/ajNjaN",
    author: "Colin van Eenige"
  },
  {
    title: "cpc-forms experiment with css variables",
    url: "https://codepen.io/terabaud/pen/YjwYKv",
    author: "Lea Rosema"
  },
  {
    title: "Nuotron Logo Animation with Hover Effect",
    url: "https://codepen.io/YahiaRefaiea/pen/YjyZLm",
    author: "Yahia Refaiea"
  }
];

میبینید که یک آرایه از 4 Object که هر کدام ویژگی‌های title و url و author داره، تعریف کردیم. از این آرایه در کامپوننت App که کامپوننت ریشه هم هست، استفاده میکنیم. بصورت زیر:

const App = () => {
  return (
    <div>
      <PenList pens={pensList} />
    </div>
  );
}

همونطور که میبینید آرایه pensList که به وجود آوردیم رو بعنوان یک Prop به کامپوننت PenList پاس دادیم. اسم این Prop که اطلاعات رو برای اون قرار دادیم، pens هست و بنابراین در کامپوننت PenList میتونیم بنام pens به این اطلاعات دسترسی داشته باشیم.

کامپوننت PenList رو بصورت زیر تعریف کردیم:

const PenList = props => {
  return (
    <React.Fragment>
      <h2>Interesting Pens on CodePen</h2>
      <ul>
        {props.pens.map(pen => {
          return (
            <li key={pen.url}>
              <Pen {...pen} />
            </li>
          );
        })}
      </ul>
    </React.Fragment>
  );
};

همونطور که میبینید با استفاده از props.pens به اطلاعات مورد نظر دسترسی پیدا کردیم و روی اونا map زدیم و آیتم‌های مربوط به لیست رو به وجود آوردیم. در هر آیتم از یک کامپوننت Pen استفاده کردیم تا اطلاعات مربوط به هر pen رو نمایش بدیم. با استفاده از ... هم همه ویژگی‌های مربوط به pen رو بصورت Props به کامپوننت Pen پاس دادیم.

کامپوننت PenList که در بالا تعریف شده، بصورت ساده هست و از Class استفاده نکردیم. اگر از Class‌ها برای تعریف کامپوننت استفاده کنیم، باید با استفاده از this.props.pens به props‌ها دسترسی داشته باشیم. بصورت زیر:

class PenList extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h2>Interesting Pens on CodePen</h2>
        <ul>
          {
            this.props.pens.map(pen => {
              return (
                <li key={pen.url}>
                  <Pen {...pen} />
                </li>
              )
            })
          }
        </ul>
      </React.Fragment>
    )
  }
}

چیز دیگه‌ای که باید به اون توجه داشته باشیم، استفاده از ویژگی key برای li هست. key یک نشانگر یکتا هست که ما به هر آیتم نسبت میدیم تا React بین اونا تمایز قائل بشه و با Performance بالاتری اونا رو رندر کنه. در این حالت ما از url هر pen بعنوان key استفاده کردیم، چون مطمئن هستیم که url‌ها با هم تفاوت دارند.

بالاخره به کوچکترین کامپوننت یعنی Pen میرسیم که اطلاعات مربوط به pen رو نمایش میده.

const Pen = props => {
  return (
    <div>
      <p>
        <a href={props.url}>{props.title}</a>
      </p>
      <p>Made by: {props.author}</p>
    </div>
  );
};

میبینید که از ویژگی‌های url و title و author در جاهای مورد نظر استفاده کردیم. به همین سادگی.

PropTypes

PropTypes به شما اطمینان میده که همون اطلاعاتی که شما انتظار دارید به کامپوننت شما ارسال میشه و در غیر اینصورت با ارور مواجه خواهید شد. برای اینکه بتونین از PropTypes در پروژه خودتون استفاده کنید، باید در ابتدا بسته prop-types رو نصب کنید.

npm i prop-types

// or: yarn add prop-types

حالا باید این بسته رو در پروژه import کنیم:

import PropTypes from 'prop-types';

فرض کنیم که بخوایم برای کامپوننت Pen، نوع props‌ها رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:

Pen.propTypes = {
  title: PropTypes.string,
  url: PropTypes.string,
  author: PropTypes.string
};

همونطور که میبینید در ابتدا یک ویژگی propTypes برای کامپوننت Pen اضافه کردیم و در اون مشخص کردیم که ویژگی‌های title و url و author بصورت رشته‌ای هستند و نه عدد و نه تابع و ...

اگر اشتباها بجای رشته از PropTypes.number برای author استفاده کنیم، با هشدار زیر روبرو میشیم:

Warning: Failed prop type: Invalid prop `author` of type `string` supplied to `Pen`, expected `number`.

پس همونطور که میبینید PropTypes‌ها بهمون در پیدا کردن باگها کمک میکنه. همینطور میتونیم با استفاده از ویژگی isRequired اونا رو ضروری کنیم و بگیم که این کامپوننت حتما به این ویژگی نیازمند است.

Pen.propTypes = {
  title: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired
};

برای اطلاعات بیشتر در مورد PropTypes میتونین مستندات اون رو مطالعه کنید.

اگر ویژگی‎هایی دارید که isRequired نیستند و دلخواه هستند، میتونین برای اونا یک مقدار پیش‌فرض تعریف کنید تا زمانی که پاس داده نمیشن، این مقدار پیش فرض برای اون ویژگی مدنظر قرار گرفته بشه.  بصورت زیر:

Pen.defaultProps = {
  title: 'sample codepen',
};

حالا اگر title رو پاس ندیم، مقدار پیش‌فرض sample codepen قرار داده میشه.

نتیجه‌گیری

در این مطلب در مورد Props و PropTypes در React توضیحاتی رو دادیم و سعی شد با استفاده از مثالها کاربرد اونا رو بطور کامل برای شما روشن کنیم.

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.