ابدأ مع React


الدرس: إعادة استخدام المكونات الخاصة بك مع الدعائم


الصفحة السابقة

تعرف على الدعائم (PROPS)


React
لقد فهمت: إعادة استخدام المكون هي في صميم منطق React . ولكن ، لإعادة استخدام المكونات ، غالبًا ما تتطلب اعدادات لذلك. خبر سار: لذلك ، ستتمكن من استخدام الدعائم. 🎉

تعرف على بناء الجملة


ماذا لو أخبرتك أنك استخدمت دعامة (prop) من قبل؟ نعم ، الدعامة   key   في الفصل الخاص بالقوائم! لذلك كنت قد رأيت بالفعل بناء الجملة.

العودة إلى موقع نباتاتنا. سنقوم الآن بإنشاء مكون جديد سيتم إعادة استخدامه. الفكرة هي إنشاء مقياس للسقي ومقياس للاضاءة لكل نبات.

دعنا  نفتح ملف ShoppingList.js ، حيث نضيف البيانات المقابلة في  plantList    : 

  • البيانات   water   التي تتوافق مع الري الموصى به لكل نبات ؛
  • والبيانات   light   التي تتوافق مع أشعة الشمس اللازمة.
لنبدأ بالضوء: في كل عنصر نباتي ، نضيف مكونًا CareScale ونمرر له القيمة :

<CareScale scaleValue={plant.light} />
 
إذن كيف نحصل على قيمة الدعامة في مكوننا  ؟

حسنًا ، الخاصيات مأخوذة من معلمات الوظيفة التي تحدد مكوننا .

ل   CareScale، وبالتالي فإننا لدينا:


function CareScale(props) {
    const scaleValue = props.value
    return 
{scaleValue}☀️
} export default CareScale
لكننا قلنا إننا نريد مقياسًا من 1 إلى 3 ، أليس كذلك؟

لذلك سنبدأ من قائمة يمكننا إنشاؤها يدويًا.

مما يعطينا:


function CareScale(props) {
    const scaleValue = props.value

    const range = [1, 2, 3]

    return (
        <div>
            {range.map((rangeElem) =>
                scaleValue >= rangeElem ? <span key={rangeElem.toString()}>☀️</span> : null
            )}
        </div>
    )
}
 
تهانينا! 🔥 لقد استخدمتها للتو   props   !

لذلك ، فإن الدعائم هي كائنات يمكن استرجاعها في معلمات مكون وظيفتنا .

سنقوم بدفع المنطق إلى أبعد من ذلك قليلاً من أجل تكوين مكوننا حقًا.

إنشاء المعلمات


سأبدأ بتحديد prop  واحد    من   type   لمكون CareScale    وإعادة استخدام هذا العنصر بين الإضاءة وسقي:


<CareScale careType='water' scaleValue={plant.water} />
<CareScale careType='light' scaleValue={plant.light} />
 
يجب أن أُكيف الآن   CareScale   لاستعادة    careType .

من الآن فصاعدًا ، سأستخدم صيغة مسموح بها لنا في ES6 : التدمير  (destructuring) يسمح لك مباشرة بتعريف متغير وتعيين قيمة خاصية كائن.
لذلك يمكننا القيام بما يلي:

const {scaleValue, careType} = props
// نتجنب مضاعفة الإعلانات التي لولا هذه الصيغة لكانت:
// const scaleValue = props.scaleValue 
// const careType = props.careType
 
وهذا يسمح لنا أن نُعلن مباشرة المتغيرين scaleValue و careType ، و نمرر لهما القيم التي صدرت في الدعائم. يمكنك حتى كتابتها مباشرة في المعلمات:

function CareScale({scaleValue, careType}) {
 

يمكننا الآن اعداد مكوننا CareScale بحيث يمكنه إدارة بيانات الري وبيانات الاضاءة:

function CareScale({ scaleValue, careType }) {
    const range = [1, 2, 3]
    
    const scaleType = careType === 'light' ? '☀️' : '💧'

    return (
        <div>
            {range.map((rangeElem) => scaleValue >= rangeElem ? <span key={rangeElem.toString()}>{scaleType}</span> : null
            )}
        </div>
    )
}
 
كما رأيت هنا ، استخدمنا صيغتين مختلفتين لدعائمنا . ل   scaleType، قمنا بتعيينه string ، في علامات الاقتباس. من ناحية أخرى   scaleValue، فقد أعطيناها قيمة كائن ، مررناها بين الأقواس.

من الناحية العملية ، يمكن أن يكون للخاصية أي قيمة محتملة في JavaScript ، ولكن من الناحية التركيبية ، في JSX ، هناك احتمالان فقط:

  • سلسلة   String ، تتجسد بالاقتباسات ؛
  • أو لكل شيء آخر (منطقي ، رقم ، تعبير جافا سكريبت ، إلخ) ، الأقواس   {} .

جلب البيانات ، من الآباء إلى الأبناء



لذلك تسمح لنا الدعائم بتكوين مكوناتنا. إنها تستجيب لمنطق React ذاته بأن البيانات تتدفق عبر شجرة المكونات لدينا: إنها تدفق بيانات أحادي الاتجاه .

React
مكونات الوالدين تشارك بياناتهم مع أبنائهم

هل أخبرتك بالفعل عن مكونات الوالدين / المكونات الفرعية في الجزء الأول من هذه الدورة التدريبية؟

كما قد تتوقع ، فإن المكون هو أصل المكون المحدد في   return() .

في مثالنا ،   CareScale   هو الابن ،   ShoppingList   وهو الوالد.

بالنسبة إلى الدعائم ، عليك مراعاة قاعدتين:

  • الدعامة دائما تمر من عنصر الوالد إلى الابن  : هذه هي الوسيلة الطبيعية فقط للانتقال.
  • الدعامة تعتبر للقراءة فقط في المكون الذي يحصل عليه.

اكتشف الدعامة التقنية  children 


هناك بعض الدعائم في React التي تتصرف بشكل مختلف قليلا: نسميها الدعامة التقنية . 🛠

يعتبر بناء جملة هذه الخاصية خاصًا ، حيث لا يتم توفيرها باستخدام سمة ، ولكن من خلال تداخل المكونات داخل المكون المعني.

مما يعطينا:


<Parent>
    <Enfant1 />
    <Enfant2 />
</Parent>
 
على سبيل المثال ، إذا استعملنا children لإعادة كتابة الشعار ، فسيكون ذلك في App.js بمثابة:

<Banner>
    <img src={logo} alt='La maison jungle' />
    <h1 className='lmj-title'>La maison jungle</h1>
</Banner>
 
هنا،    img  و   h1   هي العقد التابعة في DOM الـ    Banner .

ويمكننا الوصول إلى هذه العقد الفرعية من Banner في إعداداتها ، بنفس الطريقة التي نحصل بها على الدعائم:


function Banner({ children }) {
    return <div className='lmj-banner'>{children}</div>
}
 
تكون طريقة الاستخدام هذه مفيدة children بشكل خاص عندما لا يعرف المكون توابعه مسبقًا ، على سبيل المثال لشريط التنقل (الشريط الجانبي Sidebar) أو للشكل.
هذه   props   هي الجوانب الرئيسية في React . ولكن من خلال استخدامها ، ستجد أنه من السهل جدًا ارتكاب الأخطاء. هذه هي مرونة JavaScript بشكل خاص ، مما يجعل الكتابة الديناميكية ( الأنواع    string ،   int إلخ ) . لإعطائك مثالاً على خطأ تقليدي:
  • تقوم بتمرير قيمة الخاصية إلى أحد المكونات. 
  • أنت تستخدم قائمة من القيم ، بعض القيم عبارة عن سلاسل ، والبعض الآخر عبارة عن أرقام. 
  • يمكنك تطبيق الطريقة   .toUpperCase()   على    value   : boom   ! 
خطأ !  .toUpperCase()   غير موجود على رقم. 🙈
لتجنب هذا النوع من الخطأ ، أنصحك بتوخي الحذر الشديد بشأن نوع الدعائم التي تنقلها إلى مكوناتك.
للقيام بذلك ، أنشأ React PropTypes ، والذي يسمح لنا بتحديد نوع الخاصية من البداية ، إذا كانت مطلوبة ، وإعطائها قيمة افتراضية. لن نراهم في هذه الدورة ، لكن يمكنك إلقاء نظرة عليهم الآن.

الممارسة


React
ستكون قادرًا على استخدام معرفتك لإثراء موقع النباتات الخاص بنا 🌱. يمكن العثور على الكود لبدء التمرين على P2C4-Begin  .

ستقوم بإنشاء مكون PlantItem والذي سيكون مكونًا فرعيًا في ShoppingList  .

يأخذ PlantItem الدعائم:

  • name    لاسم النبات ؛
  • cover    للصورة المقابلة
  • id    الذي يتوافق مع عنصر كل عنصر ؛
  • light ؛
  • water.
والدعائم   name   و   cover   سيتم استخدامها مباشرة في PlantItem .

Light    و   water، التي أنشأناها بالفعل معا، سيتم تمريرها إلى مكون   CareScale   في    PlantItem .

سوف تجد في   styles/PlantItem.css   الفئات   lmj-plant-item-cover CSS  و   lmj-plant- item   التي من شأنها أن تساعد في خلق المكونات الجميلة 🤩. أقترح أيضًا أن تستبدل الرموز التعبيرية برموز "الشمس" و "الماء" ( 'sun' 'water', ) التي ستجدها فيهما    /assets .

يمكن العثور على الحل في فرع P2C4-Solution  .

باختصار


  • الدعائم هي كائنات يمكن استرجاعها في معلمات مكون وظيفتنا.
  • توجد صيغتان لتعيين قيمة لعنصر:
    • علامات الاقتباس للنوع   string  .
    • الأقواس{ } لكل شيء آخر: الأرقام وتعبيرات جافا سكريبت والمنطقية وما إلى ذلك.
  • التدمير هو بناء جملة يُستخدم لتعريف متغير عن طريق تخصيصه مباشرة لقيمة كائن (أو مصفوفة).
  • الدعامة (prop) هي:
    • دائمًا ما يتم تمريرها من خلال مكون رئيسي إلى ابنه ؛
    • تعتبر للقراءة فقط في المكون الذي يستقبلها.
  • الدعامة   children   يتم ملؤها من خلال وضع الأبناء في الوالدين
    <Parent> <Enfant /> </Parent>
  • Children    يكون مفيدًا عندما لا يعرف أحد العناصر عناصره مسبقًا.
إذن ، لم تعد الدعائم تحمل أي أسرار بالنسبة لك؟ 😎

هل تدرك أنه مع كل ما تعلمته ، فإن موقع النباتات الخاص بنا يأخذ شكلاً أكثر فأكثر؟ 

لكن ألا تعتقد أنها لا تزال ثابتة بعض الشيء؟ ألا يمكننا التفاعل معه بما فيه الكفاية؟ هذا جيد ، لأن هذا هو برنامج الفصل التالي! اراك قريبا !