في منشور المدونة هذا، سأرشدك عبر سيناريو عملي حيث يتفاعل المكون الأصلي (ListBox) مع المكون الفرعي (AlertComponent) باستخدام الدعائم وعمليات الاسترجاعات.

يفيد هذا في React عندما تريد أن يقوم مكون فرعي بالتواصل مرة أخرى مع الأصل للحفاظ على الحالة أو تشغيل الإجراءات.

دعونا نفهم بمساعدة هذا المثال:

• لدي مكون ListBox الذي يعرض قائمة بالعناصر. عندما يقوم المستخدم بالضغط لفترة طويلة على أي عنصر، يظهر مربع حوار تنبيه يسأل ما إذا كان المستخدم يريد حذف العنصر أم لا.

إليك تفاصيل التفاعل:

1. ListBox (الأصل) يعرض العناصر ويمرر الدعائم وعمليات الاسترجاعات الضرورية إلى AlertComponent (الطفل).

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. يقبل AlertComponent الدعائم مثل العنوان والوصف وعمليات رد الاتصال مثل onAccept، وonCancel، ودعامة تغيير الحالة showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (
... rest of the code
)
}

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

يعمل showComponent كرد اتصال لأنه يحافظ على الحالة المسؤولة عن إظهار/إخفاء AlertComponent

عند الضغط على رفض، سيؤدي رد الاتصال هذا إلى تبديل الحالة الحالية لـ showComponent.

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

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

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

يعد هذا مفيدًا بشكل خاص لسيناريوهات مثل عرض التنبيهات أو الوسائط أو النوافذ المنبثقة استجابةً لتفاعل المستخدم.

واصل البناء!