freeCodeCamp/guide/arabic/react/higher-order-components/index.md

title, localeTitle

title	localeTitle
Higher-Order Components	مكونات الترتيب الأعلى

مكونات الترتيب الأعلى

في React ، يكون مكون ترتيب مرتفع (HOC) دالة تأخذ مكونًا وتعيد مكونًا جديدًا. يستخدم المبرمجون HOCs لتحقيق إعادة استخدام المنطق المكون .

إذا كنت قد استخدمت connect Redux ، فقد عملت بالفعل مع مكونات الطلب العليا.

الفكرة الأساسية هي:

const EnhancedComponent = enhance(WrappedComponent);

أين:

• enhance هو مكون ترتيب العليا؛
• WrappedComponent هو المكون الذي تريد WrappedComponent ؛ و
• EnhancedComponent هو المكون الجديد الذي تم إنشاؤه.

هذا يمكن أن يكون الجسم من enhance HOC:

function enhance(WrappedComponent) { return class extends React.Component { render() { const extraProp = 'This is an injected prop!'; return ( <div className="Wrapper"> <WrappedComponent {...this.props} extraProp={extraProp} /> </div> ); } } }

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

• التقديم WrappedComponent داخل عنصر div ؛
• تمرير الدعائم الخاصة به إلى WrappedComponent ؛ و
• WrappedComponent دعم إضافي إلى WrappedComponent .

HOCs هي مجرد نمط يستخدم قوة الطبيعة المركبة React. يضيفون ميزات إلى أحد المكونات . هناك الكثير من الأشياء التي يمكنك القيام بها معهم!

موارد آخرى

• تفاعلات المستندات: مكونات الطلب الأعلى