رد فعل الدعائم

كيفية استخدام الخاصيات لتمرير البيانات حول مكونات React الخاصة بك

الدعائم هي كيف تحصل المكونات على خصائصها. بدءًا من المكون العلوي ، يحصل كل مكون فرعي على الدعائم الخاصة به من الأصل. في مكون دالة ، تكون الخاصيات هي كل ما يتم تمريره ، وهي متاحة عن طريق الإضافةpropsكوسيطة الوظيفة:

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

في مكون الصنف ، يتم تمرير الخاصيات افتراضيًا. ليست هناك حاجة لإضافة أي شيء خاص ، ويمكن الوصول إليها على أنهاthis.propsفي مثيل مكون.

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } }

يعد تمرير الدعائم إلى المكونات الفرعية طريقة رائعة لتمرير القيم في تطبيقك. يحتوي المكون إما على بيانات (له حالة) أو يتلقى البيانات من خلال عناصره.

يصبح الأمر معقدًا عندما:

  • تحتاج إلى الوصول إلى حالة أحد المكونات من طفل أقل من عدة مستويات (يحتاج جميع الأطفال السابقين إلى العمل كممر ، حتى لو لم يكونوا بحاجة إلى معرفة الحالة ، مما يعقد الأمور)
  • تحتاج إلى الوصول إلى حالة أحد المكونات من مكون غير ذي صلة تمامًا.

القيم الافتراضية للدعامات

إذا لم تكن أي قيمة مطلوبة ، فنحن بحاجة إلى تحديد قيمة افتراضية لها إذا كانت مفقودة عند تهيئة المكون.

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = { title: ‘’, description: ‘’ }

بعض الأدوات مثلESLintلديها القدرة على فرض تعريف العناصر الافتراضية لمكون مع بعض propTypes غير مطلوب بشكل صريح.

كيف يتم تمرير الدعائم

عند تهيئة مكون ، مرر الخاصيات بطريقة مشابهة لسمات HTML:

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

لقد مررنا العنوان كسلسلة بسيطة (شيء نستطيعهفقطافعله بالسلاسل!) والوصف كمتغير.

أطفال

الدعامة الخاصة هيchildren. يحتوي على قيمة أي شيء يتم تمريره فيbodyالمكون ، على سبيل المثال:

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

في هذه الحالة ، في الداخلBlogPostExcerptيمكننا الوصول إلى "شيء ما" من خلال البحثthis.props.children.

بينما تسمح Props للمكون بتلقي الخصائص من الأصل ، ليتم "توجيهه" لطباعة بعض البيانات على سبيل المثال ، تسمح الحالة للمكون بأخذ الحياة نفسها ، والاستقلال عن البيئة المحيطة.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: