{"id":"l-rf-2-3","courseId":"react-fundamentals","lang":"ar","kind":"lesson","summary":"ابنِ components مرنة باستخدام الـ prop المسمّى children وفتحات JSX، وخصّص الـ components العامة، ومرّر العناصر إلى الأسفل لتتجنّب تمرير الـ props عبر طبقات لا تحتاجها.","html":"

سيحتوي Watchlist على عدّة صناديق متشابهة: لوحة «To watch»، ولوحة «Watched»، وربما لوحة «Recommendations» لاحقًا. لكل منها شريط عنوان، وأحيانًا زر أو اثنان على الجانب، ومحتوى مختلف في الداخل. يمكنك إضافة prop لكل نوع محتمل من المحتوى. أو يمكنك أن تدع المستدعي يضع ما يشاء في الداخل، كما تضع أي شيء داخل <div>.

\n

هذا النهج الثاني هو التركيب (composition)، وبه تُبنى أغلب الـ components المرنة في React.

\n

الـ prop المسمّى children

\n

كل ما تضعه بين وسمي component يصل إليه كـ prop اسمه children:

\n
src/components/Panel.jsx
export default function Panel({ title, children }) {\n  return (\n    <section className=\"panel\">\n      <h2>{title}</h2>\n      <div className=\"panel-body\">{children}</div>\n    </section>\n  );\n}
\n
src/App.jsx
<Panel title=\"To watch\">\n  <MovieList movies={toWatch} />\n</Panel>\n\n<Panel title=\"Watched\">\n  <p>You've watched {watched.length} movies.</p>\n</Panel>
\n

لا يعرف Panel ما في الداخل ولا يهمّه. هو يملك الإطار (الـ section والعنوان والتنسيق)، والمستدعي يملك المحتوى. لقد استخدمت هذا طوال الوقت من دون أن تلاحظ: <main> و<section> يأخذان children أيضًا.

\n

يمكن لـ children أن يكون أي شيء قابل للعرض: عنصرًا واحدًا، أو عدّة عناصر، أو نصًا، أو لا شيء. تعامل معه كصندوق مغلق واعرضه في مكانه. لا تفحصه ولا تعدّه ولا تعدّله؛ وإذا احتاج الغلاف إلى معرفة شيء عن محتواه، فيجب أن تصله تلك المعلومة كـ prop عادي.

\n

تظهر الفائدة حين يتغيّر التصميم. إذا حصلت اللوحات الشهر القادم على زوايا دائرية وظل، فستعدّل Panel مرة واحدة وتتحدّث كل لوحة في التطبيق، مهما كان محتواها.

\n\n

أكثر من slot واحد

\n

الـ children هو slot (فتحة) واحد. وحين يحتاج الـ component إلى محتوى في عدّة أماكن، استخدم props عادية تحمل JSX. هذه لوحة فيها أزرار اختيارية في ترويستها:

\n
src/components/Panel.jsx
export default function Panel({ title, actions, children }) {\n  return (\n    <section className=\"panel\">\n      <header className=\"panel-header\">\n        <h2>{title}</h2>\n        {actions}\n      </header>\n      <div className=\"panel-body\">{children}</div>\n    </section>\n  );\n}
\n
JSX
<Panel\n  title=\"To watch\"\n  actions={<button onClick={shuffle}>Shuffle</button>}\n>\n  <MovieList movies={toWatch} />\n</Panel>
\n

إذا لم يُمرَّر actions فقيمته undefined، وهي لا تعرض شيئًا، فيصبح الـ slot اختياريًا بلا أي جهد. قارن هذا بواجهة مثل buttons={['Shuffle', 'Clear']}: سيحتاج Panel إلى إنشاء الأزرار، وربط المعالجات، والتعامل مع الأيقونات وحالات التعطيل، وإضافة prop جديد مع كل طلب. أمّا مع الـ slot فيقرّر Panel أين توضع الأشياء، ويقرّر المستدعي ما هي.

\n\n

التخصيص

\n

أحيانًا تريد نسخة ثابتة من component عام. لا تنسخه؛ بل ارسمه مع props مضبوطة مسبقًا:

\n
src/components/Button.jsx
export function Button({ variant = 'neutral', children, ...rest }) {\n  return (\n    <button className={`btn btn-${variant}`} {...rest}>\n      {children}\n    </button>\n  );\n}\n\nexport function DangerButton(props) {\n  return <Button variant=\"danger\" {...props} />;\n}
\n

الـ component المسمّى DangerButton هو Button اتُّخذ فيه قرار واحد مسبقًا. والـ ...rest في Button يمرّر كل ما عدا ذلك، مثل onClick أو type أو disabled، إلى الـ <button> الحقيقي، فيستخدمه المستدعون كعنصر HTML الذي يعرفونه أصلًا. أصلِح خطأً في Button وستحصل كل الأشكال المشتقّة منه على الإصلاح.

\n

التركيب بدلًا من الـ prop drilling

\n

هذه مشكلة يصادفها كل تطبيق. يملك App الأفلام. ويرسم Layout الـ component المسمّى Sidebar، والشريط الجانبي يعرض WatchCount. لا يحتاج إلى الأفلام إلا WatchCount، لكن لتوصيلها إليه تمرّرها عبر كل مستوى:

\n
JSX
<Layout movies={movies} />           // Layout doesn't use movies…\nfunction Layout({ movies }) {\n  return <Sidebar movies={movies} />; // …neither does Sidebar\n}
\n

تمرير البيانات عبر components لا تفعل سوى إعادة تمريرها يُسمّى prop drilling (حفر الـ props عبر الطبقات). إنه مملّ، وكل component وسيط صار يعتمد على بيانات لا يستخدمها.

\n

والتركيب يزيله غالبًا. دع App، الذي يملك البيانات، يُنشئ العنصر، ودع Layout يضعه في مكانه:

\n
JSX
export default function App() {\n  return (\n    <Layout sidebar={<WatchCount movies={movies} />}>\n      <MovieList movies={movies} />\n    </Layout>\n  );\n}\n\nfunction Layout({ sidebar, children }) {\n  return (\n    <div className=\"layout\">\n      <aside>{sidebar}</aside>\n      <main>{children}</main>\n    </div>\n  );\n}
\n

لم يعد Layout يعرف أن الأفلام موجودة. صار component تخطيط خالصًا يمكنك إعادة استخدامه في أي صفحة. وتوفّر React أيضًا الـ context للبيانات التي تحتاجها components كثيرة متباعدة، مثل السمة الحالية أو المستخدم المسجّل دخوله. لكن توثيق React يوصي بتجربة التركيب أولًا، وهو ينجح في الغالب.

\n\n

في الدرس التالي تجعل الـ components تعرض أشياء مختلفة بحسب البيانات، من شارة «Watched» إلى رسالة القائمة الفارغة، باستخدام العرض الشرطي.

\n","toc":[{"id":"sec-1","text":"الـ prop المسمّى children","level":2},{"id":"sec-2","text":"أكثر من slot واحد","level":2},{"id":"sec-3","text":"التخصيص","level":2},{"id":"sec-4","text":"التركيب بدلًا من الـ prop drilling","level":2}],"takeaways":["كل ما تضعه بين وسمي الفتح والإغلاق لـ component يصل إليه في الـ prop المسمّى children.","يمكن للـ prop أن يحمل JSX، فيستطيع الـ component أن يوفّر عدّة slots مسمّاة مثل actions أو footer.","خصّص الـ component العام برسمه مع props مضبوطة مسبقًا بدلًا من نسخه.","تمرير عناصر جاهزة إلى الأسفل يغنيك غالبًا عن تمرير البيانات عبر components لا تستخدمها."],"further":[{"title":"Passing JSX as children","url":"https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children"},{"title":"Passing Data Deeply with Context (consider composition first)","url":"https://react.dev/learn/passing-data-deeply-with-context#before-you-use-context"}],"quiz":[{"q":"

ما الذي يُعرض داخل <section>؟

\n
JSX
function Panel({ title }) {\n  return <section><h2>{title}</h2></section>;\n}\n\n<Panel title=\"To watch\">\n  <MovieList movies={movies} />\n</Panel>
\n","options":[{"text":"العنوان ثم قائمة الأفلام.","why":"تُمرَّر القائمة كـ children، لكن Panel لا يعرض children أبدًا، فتسقط بصمت."},{"text":"العنوان فقط؛ القائمة تُمرَّر كـ children لكن Panel لا يعرضها أبدًا.","why":"صحيح. الـ JSX المتداخل يصبح الـ prop المسمّى children، ويجب أن يضع Panel القيمة {children} في مكان ما من مخرجاته."},{"text":"خطأ، لأن Panel لا يعلن عن معامل اسمه children.","why":"لا تشتكي React أبدًا من props غير مستخدمة، ولهذا يسهل أن يفوتك هذا الخطأ."},{"text":"تحلّ قائمة الأفلام محلّ العنوان.","why":"الـ children لا تحلّ أبدًا محلّ مخرجات الـ component نفسه. إنها مجرّد prop آخر قد يعرضه الـ component."}],"answer":1},{"q":"

تحتاج إلى Panel له عنوان ومحتوى وأزرار اختيارية في الزاوية العليا. أيّ واجهة استخدام هي الأكثر مرونة ووضوحًا؟

","options":[{"text":"prop اسمه buttons يحمل مصفوفة من نصوص التسميات، ويُنشئ Panel الأزرار.","why":"سيضطر Panel إلى معرفة معالجات النقر والأيقونات وحالات التعطيل، وستكبر واجهته بلا نهاية."},{"text":"componentان منفصلان PanelWithButtons وPanelWithoutButtons.","why":"نسخ الـ component لكل شكل (variant) يضاعف الكود الذي تصونه، ومع ذلك لا يغطّي الحالات الجديدة."},{"text":"مرّر الـ markup الكامل للوحة كنص واعرضه باستخدام dangerouslySetInnerHTML.","why":"هذا يتخلّى كليًا عن تهريب React للنصوص وعن الـ components. إنه غير آمن وأصعب كثيرًا في التعديل."},{"text":"prop اسمه actions يأخذ JSX، مثل actions={<button onClick={shuffle}>Shuffle</button>}.","why":"صحيح. الـ slot من نوع JSX يتيح للمستدعي تمرير أي عناصر بمعالجاتها الخاصة، ولا يقرّر Panel إلا مكانها."}],"answer":3},{"q":"

يملك App المصفوفة movies. ويرسم Layout الـ component المسمّى Sidebar، الذي يرسم WatchCount، وهو الوحيد الذي يحتاج إلى movies. ما الحل بالتركيب (composition) لتجنّب تمرير movies عبر Layout وSidebar؟

","options":[{"text":"في App، ارسم <Layout sidebar={<WatchCount movies={movies} />} />، ودع Layout يضع sidebar في مكانه.","why":"صحيح. يُنشئ App العنصر بالبيانات التي يملكها أصلًا. أمّا Layout وSidebar فيكتفيان بتحديد موضعه ولا يريان movies أبدًا."},{"text":"اجعل movies متغيّرًا عامًا يستورده WatchCount.","why":"البيانات القابلة للتغيير في مستوى الـ module لا تُطلق re-render، وتجعل الـ components صعبة الاختبار وإعادة الاستخدام."},{"text":"انسخ movies إلى state داخل WatchCount.","why":"النسخة الثانية تصبح قديمة حين تتغيّر أفلام App. يجب أن يكون للبيانات مالك واحد."}],"answer":0},{"q":"

يأخذ الـ component المسمّى Button الـ prop icon ويعرض <span>{icon}</span>. أيّ استدعاء يعرض أيقونة نجمة؟

","options":[{"text":"<Button icon={StarIcon}>Rate</Button>","why":"هذا يمرّر دالة الـ component نفسها. تحذّر React من أن الدوال ليست ابنًا صالحًا ولا تعرض شيئًا."},{"text":"<Button icon="StarIcon">Rate</Button>","why":"هذا يمرّر النص “StarIcon”، فيُعرض كهذه الحروف."},{"text":"<Button icon={<StarIcon />}>Rate</Button>","why":"صحيح. <StarIcon /> عنصر React يمكن عرضه في أي مكان، والـ slot يتوقّع عناصر."}],"answer":2}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"function Panel({ title }) {\n // Add an actions slot in the header and render children in the body\n return (\n
\n
\n

{title}

\n
\n
\n );\n}\n\nexport default function App() {\n return (\n
\n Shuffle}>\n \n \n \n

You've watched 1 movie.

\n \n
\n );\n}\n"},"solution":{"jsx":"function Panel({ title, actions, children }) {\n return (\n
\n
\n

{title}

\n {actions}\n
\n
{children}
\n
\n );\n}\n\nexport default function App() {\n return (\n
\n Shuffle}>\n \n \n \n

You've watched 1 movie.

\n \n
\n );\n}\n"},"checks":[{"id":"two-panels","test":"const s = $$('section'); return s.length === 2 && text(s[0].querySelector('header h2')) === 'To watch' && text(s[1].querySelector('header h2')) === 'Watched';"},{"id":"children-first","test":"const s = $$('section'); return s.length === 2 && s[0].querySelectorAll('li').length === 2 && !s[0].querySelector('header li');"},{"id":"children-second","test":"const s = $$('section'); return s.length === 2 && text(s[1]).includes(\"You've watched 1 movie.\") && !s[1].querySelector('header p');"},{"id":"actions-slot","test":"const s = $$('section'); const b = s[0] && s[0].querySelector('header button'); return !!b && text(b) === 'Shuffle';"},{"id":"actions-optional","test":"const s = $$('section'); return s.length === 2 && !s[1].querySelector('button');"}],"title":"Panel فيه slots","prompt":"

يستخدم App الـ component المسمّى Panel بالطريقة التي يجب أن يعمل بها، لكن Panel يتجاهل معظم ما يُعطى له. عدّل Panel فقط بحيث:

\n\n

لوحة Watched ليس لها actions، لذا يجب ألّا تعرض أي زر.

\n","hints":["فكّك propين إضافيين: function Panel({ title, actions, children }).","اعرض {actions} مباشرة بعد <h2>. وإذا كانت قيمته undefined فلن تعرض React شيئًا.","أضف <div>{children}</div> بعد وسم الإغلاق </header>."],"explanation":"

يصل الـ JSX المتداخل كـ children، ويحمل الـ prop المسمّى actions عنصرًا، فكلاهما مجرّد قيمة يضعها Panel في الـ markup الخاص به. يقرّر Panel أين توضع الأشياء، ويقرّر App ما هي. ولأن الـ prop الغائب قيمته undefined، وundefined لا تعرض شيئًا، يصبح الـ slot المسمّى actions اختياريًا من دون أي if.

\n","checkLabels":{"two-panels":"لوحتان بالعنوانين “To watch” و"Watched"","children-first":"تعرض لوحة To watch عنصري القائمة الخاصين بها، خارج الترويسة","children-second":"تعرض لوحة Watched الفقرة الخاصة بها، خارج الترويسة","actions-slot":"يظهر زر Shuffle داخل ترويسة لوحة To watch","actions-optional":"لوحة Watched لا تحتوي على أي زر"}},"words":636,"readMinutes":4}