لقد قمت بالتطوير باستخدام React لعدة أشهر دون أن أفهم بشكل كامل القوة الحقيقية لنموذج مكون React. في أحد الأيام قررت الغوص في التأليف، وهذا ما تعلمته.

مكونات التفاعل والأطفال

في React، يمكن أن يحتوي المكون على واحد أو أكثر أو لا يوجد أي عناصر فرعية. عظيم، ولكن انتظر   —   ما هم "الأطفال"؟ دعونا نوضح بمثال:

مكون الملف الشخصي يحتوي على فرعين: صورة الملف الشخصي وتفاصيل الملف الشخصي، في حين أن هذين ليس لهما أطفال.

"في تعبيرات JSX التي تحتوي على علامة فتح وعلامة إغلاق، يتم تمرير المحتوى بين هاتين العلامتين كدعامة خاصة:props.children" — وثائق التفاعل

في الأساس، Props.children هي خاصية خاصة، يتم تمريرها تلقائيًا إلى كل مكون، ويمكن استخدامها لعرض المحتوى المضمن بين علامتي الفتح والإغلاق عند استدعاء مكون. يتم تحديد هذه الأنواع من المكونات من خلال الوثائق الرسمية على أنها "صناديق".

تحديد المكونات من خلال بناء جملة JSX

في JSX الخاص بـ React، يتم دائمًا تعريف المكون الذي يحتوي على عناصر فرعية بواسطة علامة فتح وعلامة إغلاق. ويجب وضع كل طفل بين هاتين العلامتين، تمامًا كما رأينا أعلاه. عندما لا يحتوي المكون على أي عناصر فرعية، يمكنك استدعاؤه إما باستخدام أو ، ولكن يفضل استخدام الصيغة الأخيرة بشكل عام. الغرض من علامات الإغلاق الذاتي هو جعل التعليمات البرمجية أقصر وأسهل في القراءة.

Props.children في الإجراءات

لنفترض أننا نريد إنشاء مكون ImageSlider. هدفنا هو استدعاء المكون تمامًا مثل هذا:

كما ترون، يتكون ImageSlider من عدة والتي يمكن الوصول إليها وعرضها من خلال Props.children.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

بفضل Props.children يمكننا دمج المحتوى الخاص بنا داخل أحد المكونات، تمامًا مثلما نقوم بدمج عناصر HTML الشائعة.

ما أنواع المحتوى المسموح به لـprops.children؟

المحتوى الذي تم تمريره إلى مكون من خلال Props.children يمكن أن يتضمن

غير محدد، أو فارغ، أو منطقي، أو رقم، أو سلسلة، أو عنصر React، أو مصفوفة من أي من هذه الأنواع بشكل متكرر. يمكن أن تكون أيضًا دالة تُرجع أحد هذه الأنواع.

يرجى ملاحظة أنه، كما هو مذكور في وثائق React، فإن false وnull وun المعرفة وtrue هي عناصر فرعية صالحة، ولكن سيتم تجاهلها ولن يتم عرضها. إذا كنت تريد عرض خطأ أو صحيح أو فارغ أو غير محدد، فيجب عليك أولاً تحويله إلى سلسلة:

  { String(undefined) }

لماذا يعتبر Props.children مهمًا جدًا؟

props.children يسمح لنا بتأليف المكونات، وبالتالي الواجهة الأمامية لدينا نتيجة لذلك؛ تسخير القوة الحقيقية لنموذج مكون React.

"تحتوي React على نموذج تركيب قوي، و نوصي باستخدام التركيب بدلاً من الوراثة لإعادة استخدام التعليمات البرمجية بين المكونات." — وثائق التفاعل

كما هو موضح في الوثائق الرسمية، قد تحتاج أحيانًا إلى ملء "ثغرات" متعددة في أحد المكونات. في مثل هذه الحالات، بدلًا من استخدام Props.children، قد يكون تحديد عدة خاصيات مخصصة هو الأسلوب المفضل؛ كما هو موضح في المثال التالي:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

رد فعل. الأطفال

"يوفر React.Children أدوات مساعدة للتعامل مع بنية بيانات Props.children المبهمة" — وثائق React

لماذا تعتبر Props.children "بنية بيانات غير شفافة"؟

لأن Props.children يمكن أن تتكون من عنصر فرعي واحد، أو متعدد، أو لا يوجد عناصر فرعية، مما يعني أن قيمتها يمكن أن تكون عقدة فرعية واحدة، أو مجموعة من العقد الفرعية، أو غير محدد على التوالي. بفضل واجهة برمجة التطبيقات React.Children، يمكننا التعامل بسهولة مع Props.children دون أخذ كل أنواعها المحتملة في الاعتبار. ولحسن الحظ، سيتم التعامل مع كل شيء لنا في الخلفية.

في وقت كتابة هذا التقرير، تقدم React.Children خمس أدوات مساعدة مختلفة:

• خريطة

• لكل

• عدد

• فقط

• لمجموعة

دعونا نرى كيف يمكننا استخدام React.Children مع مثال. لنفترض أننا نريد إضافة فئة CSS الخاصة img-special-class إلى كل من العناصر الفرعية لمكون ImageSlider. ويمكن القيام بذلك على النحو التالي:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

يسمح لنا React.Children.map بالتكرار على Props.children وتحويل كل عنصر وفقًا للوظيفة التي تم تمريرها كمعلمة ثانية. لتحقيق هدفنا، استخدمنا React.cloneElement. هذا لأننا كنا بحاجة إلى تغيير قيمة الخاصية className، لكن الخاصيات غير قابلة للتغيير في React، لذلك كان علينا استنساخ كل طفل.

خاتمة

يعد إتقان Props.children أمرًا ضروريًا لتصبح مطور React رائعًا والبدء في تسخير الإمكانات الكاملة لنموذج مكون React. تعد Props.children إحدى ميزات React الأكثر فائدة، لأنها تمنحنا القدرة على عرض المكونات الفرعية. ولهذا السبب، يجب على كل مطور أن يعرف كيفية استخدامه بشكل صحيح.

آمل أن تساعدك هذه المقالة على إتقان التركيب في React.

ظهر المنشور "A Complete Guide To Props.children In React" للمرة الأولى على Writech.