پراپس children (Props Children)

در React، پراپس children راه فرستادن محتوای بین دو تگ است. یعنی چیزهایی که بین تگ باز و بسته یک کامپوننت می نویسی، به خود آن کامپوننت تحویل داده می شود.

پراپس children در React چیست؟

کامپوننت (Component) یعنی یک تکه رابط کاربری تکراری؛ مثل یک کارت آماده. پراپس children در React متنی است که بین تگ باز و بسته کامپوننت قرار می دهی و داخل خود کامپوننت با props.children به آن دسترسی داری.

مثل وقتی در مدرسه روی جلد دفتر اسم می نویسی و داخل دفتر متن می نویسی. اسم شبیه پراپس معمولی است و متن داخل دفتر شبیه children است.

مثال props.children بین Parent، Son و Daughter

در این مثال، کامپوننت Parent دو فرزند به نام Son و Daughter دارد. متن پاراگراف ها داخل تگ های Son و Daughter نوشته می شود، اما در خود این دو کامپوننت نمایش داده می شود.

function Son(props) {
  return (
    <div style={{ background: 'lightgreen' }}>
      <h2>Son</h2>
      <div>{props.children}</div>
    </div>
  );
}

function Daughter(props) {
  const { brand, model } = props;
  return (
    <div style={{ background: 'lightblue' }}>
      <h2>Daughter</h2>
      <div>{props.children}</div>
    </div>
  );
}

function Parent() {
  return (
    <div>
      <h1>My two Children</h1>
      <Son>
        <p>
          This was written in the Parent component,
          but displayed as a part of the Son component
        </p>
      </Son>
      <Daughter>
        <p>
          This was written in the Parent component,
          but displayed as a part of the Daughter component
        </p>
      </Daughter>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <Parent />
);

مشاهده در ادیتور

متن پاراگراف ها در Parent نوشته شده است. اما با props.children داخل Son و Daughter نمایش داده می شود. یعنی والد محتوا را می نویسد، فرزند آن را نشان می دهد.

چطور props.children کار می کند؟

هر چیزی که بین تگ باز و بسته می نویسی، به عنوان children ارسال می شود. این چیز می تواند متن ساده، تگ HTML، یا حتی کامپوننت دیگر باشد.

در مثال بالا، داخل <Son> ... </Son> یک پاراگراف داریم. این پاراگراف به Son می رسد و با {props.children} همانجا رندر می شود.

گام های عملی برای تمرین props.children

1. یک کامپوننت ساده مثل Box بساز.
2. داخل Box از {props.children} در JSX استفاده کن.
3. در createRoot چند بار Box را با محتوای مختلف صدا بزن.
4. کد را اجرا کن و ببین هر بار چه محتوایی نمایش داده می شود.

ارتباط props.children با بقیه پراپس ها

در کامپوننت Daughter هم پراپس معمولی داریم، هم props.children. بالای تابع، با دیس ترکچرینگ (Destructuring) brand و model جدا شده اند؛ در عین حال از props.children نیز برای محتوای داخلی استفاده شده است.

این یعنی می توانی همزمان اطلاعات ثابت مثل برند را با پراپس معمولی بفرستی و متن متغیر را با children بسازی. پس پراپس children در React مکمل پراپس های معمولی است.

جمع بندی سریع پراپس children (Props Children)

• پراپس children در React محتوای بین تگ باز و بسته است.
• داخل کامپوننت با props.children به این محتوا دسترسی داری.
• می توانی متن، HTML یا کامپوننت دیگر را به عنوان children بفرستی.
• کامپوننت والد محتوا را می نویسد، کامپوننت فرزند آن را نمایش می دهد.
• پراپس children (Props Children) کنار پراپس های معمولی، کد را انعطاف پذیر می کند.