مفهوم {children} در کامپوننت های React

شاید برای شما هم بارها و بارها اتفاق افتاده باشد که در نمونه کد های ری اکت، دیده باشید در جایی {children} را میگذارند. در این پست کوتاه به مفهوم {children} در کامپوننت های React خواهیم پرداخت.

مفهوم و عملکرد children بسیار سادست. کد زیر را در نظر بگیرید.

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src='.jpg'
      alt={person.name}
      width={size}
      height={size}
    />
  );
}
 
 
export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}
 
 
function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

زمانیکه در بین دو یا چند کامپوننت در حال پاس دادن پراپس ها هستیم و یک کامپوننت مادر برای wrap کردن یا دربرگرفتن سایر کامپوننت ها ساختیم، باید برای انتقال درست پراپس ها از {children} استفاده کنیم.

میگویند Passing JSX as children یعنی پاسکاری جی اس ایکس مانند چیلدرن !

وقتی محتوایی را درون یک تگ JSX قرار می‌دهید، مؤلفه والد آن محتوا را در یک prop به نام children دریافت می‌کند.

به عنوان مثال، در کد بالا، کامپوننت Card درون خود یک پراپ children را روی دریافت می‌کند و آن را در یک wrapper div ارائه می‌کند.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.