Children در کامپوننت‌ها

Children: نمایش محتوای داخلی یک کامپوننت

در درس قبلی دیدیم که Props روشی برای ارسال داده به یک کامپوننت است. اما گاهی می‌خواهیم نه یک مقدار ساده، بلکه محتوایی که بین تگ باز و بسته یک کامپوننت نوشته شده را به آن کامپوننت منتقل کنیم. برای این کار، React از یک Prop خاص به نام children استفاده می‌کند.

مشکل: محتوایی که باید از بیرون کامپوننت تعیین شود

فرض کنید می‌خواهیم یک کامپوننت Card بسازیم که یک قاب استاندارد با حاشیه و پدینگ دارد، اما محتوای داخل آن باید هر بار متفاوت باشد. نوشتن یک Prop جداگانه برای هر نوع محتوا (مثلاً text، title، list) کار سختی است و مقیاس‌پذیر نیست.

راه‌حل: Prop خاص children

وقتی محتوایی بین تگ باز و بسته یک کامپوننت قرار می‌گیرد، React آن محتوا را به‌صورت خودکار در Propی به نام children در اختیار همان کامپوننت قرار می‌دهد:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

حالا می‌توان هر نوع محتوایی را داخل Card قرار داد:

function App() {
  return (
    <Card>
      <h3>عنوان کارت</h3>
      <p>این متن، محتوای داخلی کارت است.</p>
    </Card>
  );
}

در این مثال، JSX داخل تگ <Card>...</Card> به‌عنوان مقدار children به کامپوننت Card منتقل می‌شود و همان‌جایی نمایش داده می‌شود که {children} نوشته شده است.

children یک Prop معمولی است

نکته مهم این است که children هیچ ویژگی جادویی خاصی ندارد؛ این فقط یک Prop معمولی با نامی از پیش تعیین‌شده است که React به‌طور خودکار آن را از محتوای بین تگ‌ها پر می‌کند. به همین دلیل، تمام قوانینی که درباره Props گفتیم (مثلاً فقط‌خواندنی بودن) درباره children نیز صدق می‌کند.

چرا این الگو مفید است

استفاده از children باعث می‌شود بتوان کامپوننت‌های «قالب‌مانند» (مانند Card، Modal، Layout یا Panel) ساخت که ظاهر و ساختار کلی را تعیین می‌کنند، بدون اینکه محتوای دقیق داخلشان را از پیش بدانند. این الگو یکی از پایه‌های اصلی ترکیب کامپوننت‌ها (Component Composition) است که در فصل بعدی با جزئیات بیشتری بررسی می‌شود.

ترکیب children با سایر Propها

یک کامپوننت می‌تواند هم‌زمان هم children و هم Propهای دیگر داشته باشد:

function Panel({ title, children }) {
  return (
    <div className="panel">
      <h3>{title}</h3>
      {children}
    </div>
  );
}

مثال قابل اجرا

استفاده از children در یک کامپوننت Panel

function Panel({ title, children }) {
  return (
    <div>
      <h3>{title}</h3>
      {children}
    </div>
  );
}

function App() {
  return (
    <Panel title="اطلاعیه">
      <p>این پیام داخل Panel نمایش داده می‌شود.</p>
    </Panel>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

children یک Prop از پیش تعیین‌شده در React است که محتوای نوشته‌شده بین تگ باز و بسته یک کامپوننت را در اختیار آن قرار می‌دهد. این الگو به ما اجازه می‌دهد کامپوننت‌هایی بسازیم که ساختار کلی را مشخص می‌کنند اما محتوای داخلشان از بیرون تعیین می‌شود. در درس بعدی به سراغ Rendering و Conditional Rendering می‌رویم.