كيفية إنشاء مكون تخطيط البناء باستخدام React.

تخطيط البناء هو نوع من التخطيط حيث يتم تحديد عرض أو ارتفاع العناصر بينما البعد الآخر متغير. كما يضمن وجود فجوة موحدة بين العناصر.

تخطيط البناء

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


  
العنصر   
العنصر   // المزيد من العناصر

المتطلبات الأساسية.

  • معرفة جافا سكريبت الأساسية مثل الإعلان عن المتغيرات والعمل مع المصفوفات.
  • بيئة تطوير التفاعل الوظيفي. يمكنك استخدام التطبيق إنشاء رد فعل.
  • التفاعل الأساسي - JSX ، والمكونات الوظيفية وإعلان propType.
  • حزمة دعم الأنواع. تثبيت npm - حفظ أنواع الدعامة

خلق المكون.

المكون الذي سنقوم بإنشائه سيكون مكونًا وظيفيًا.

استيراد رد من "رد فعل" ؛
استيراد PropTypes من "أنواع prop" ؛
const MasonryLayout = props => {
}

سيكون لدينا مكون بعض الدعائم - الأعمدة (عدد الأعمدة في تخطيط البناء) ، والفجوة (المسافة بين العناصر) والأطفال. يتعين علينا القيام ببعض الحسابات باستخدام الأعمدة والفجوات ، لذلك ستكون أنواعها عددًا.

دعنا نحدد propTypes للمكون وقيمه الافتراضية كما هو موضح أدناه.

MasonryLayout.propTypes = {
  الأعمدة: PropTypes.number.isRequired ،
  الفجوة: PropTypes.number.isRequired ،
  الأطفال: PropTypes.arrayOf (PropTypes.element) ،
}؛
MasonryLayout.defaultProps = {
  الأعمدة: 2 ،
  الفجوة: 20 ،
}؛

سيكون دعم الأطفال عبارة عن مجموعة من العناصر التي سيتم تحديدها بين علامة البدء () ونهاية علامة () الخاصة بمكوننا. سنستخدم هذا prop للوصول إلى العناصر التي سيعرضها مكون التخطيط الخاص بنا.

نحتاج إلى إنشاء صفائف ديناميكية تحتوي على عناصر في كل عمود. داخل وظيفة MasonryLayout ، دعونا نخلق ونعلن بعض المتغيرات.

const MasonryLayout = props => {
  const columnWrapper = {}؛
  نتيجة const = [] ؛
}

سيمكننا كائن columnWrapper من إنشاء صفائف ديناميكية يمكننا استخدامها كـ "مجموعات" للاحتفاظ بالعناصر في كل عمود. سيحتوي صفيف النتائج على عناصر العمود (jsx). هذا هو ما يجب إرجاعه بواسطة المكون.

أنشئ الأعمدة كما هو موضح أدناه.

/ / إنشاء الأعمدة
لـ (دعني = 0 ؛ أنا 

قسّم الأطفال إلى أعمدة كما هو موضح أدناه.

لـ (دعني = 0 ؛ أنا 
      {props.children [أنا]}
    
  )؛
}

في الكود أعلاه ، تم لف العنصر الفرعي بعلامة div قبل الدفع في العمود. يتيح لنا ذلك إضافة مسافة بين العناصر في العمود باستخدام الهامش السفلي.

ستكون الخطوة التالية هي لف العناصر في كل عمود بعلامة div ودفعها إلى صفيف النتائج كما هو موضح أدناه.

لـ (دعني = 0 ؛ أنا  0؟ props.gap: 0} px` ،
        المرن: 1 ،
      }}>
      {columnWrapper [ `العمود $ {أنا}`]}
    
  )؛
}

نحتاج إلى مسافة بين الأعمدة ، لذا فإن إضافة هامش يسار على جميع الأعمدة بخلاف الأولى تفعل الحيلة. سيتم تقديم الأعمدة في حاوية فليكس ومن ثم العطف: 1.

دعونا نلف النتيجة في حاوية مرنة ونعيدها.

إرجاع (
 
   {نتيجة}   

باستخدام المكون.

لنجعل كل عنصر من عناصر div يبلغ 12 ارتفاعًا عشوائيًا يتراوح بين 200 بكسل و 500 بكسل.

<أعمدة MasonryLayout = {3} gap = {25}>
  {
    [... Array (12) .keys ()]. ​​map (key => {
      const const = 200 + Math.ceil (Math.random () * 300) ؛
  
      إرجاع (
        
       )      })   }

مبروك ، لقد انتهينا من إنشاء مكون تخطيط قابل لإعادة الاستخدام للبناء. إذا كان لديك أي أسئلة ، شاركني في التعليقات.

هل تحتاج إلى توظيف كبار المطورين؟ التحدث إلى أنديلا لمساعدتك على نطاق واسع.
هل تبحث لتسريع حياتك المهنية كمطور؟ يعمل Andela حاليًا على تعيين كبار المطورين. قدم الآن.