شاید برای شما هم بارها و بارها اتفاق افتاده باشد که در نمونه کد های ری اکت، دیده باشید در جایی {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 ارائه می‌کند.

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