إعادة استخدام الإطار الخارجي بإستخدام children

ال children بتمثل المحتوى المكتوب بين بداية المكون ونهايته

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

بنستخدم مكون Card كإطار لمحتوى مختلف

ملف App.jsx

function Card({ children }) {
  return <section className="card">{children}</section>;
}
export default function App() {
  return <Card><h2>Profile</h2><p>Osama</p></Card>;
}

النتيجة

العنوان والفقرة بيظهروا داخل نفس section