في React، تحاول استدعاء الطريقة someMethod() الموجودة في الكلاس Parent داخل الكلاس Child. ومع ذلك، يحدث خطأ لأن someMethod() ليست على النحو المتوقع متاحة كطريقة مباشرة للكلاس Parent. لحل هذه المشكلة، يمكنك استخدام الدوال المساعدة لنقل الطريقة من الكلاس الأب إلى الكلاس الابن.
لفعل ذلك، يمكنك تمرير دالة من الكلاس الأب إلى الكلاس الابن كخاصية (prop)، ثم استخدامها داخل الكلاس الابن. فيما يلي كيفية تعديل الشفرة لتحقيق ذلك:
في الكلاس Parent، قم بتحويل الطريقة someMethod() إلى دالة أسفل الكلاس، ثم قم بتمرير هذه الدالة كـ prop إلى الكلاس Child:
javascriptclass Parent extends React.Component {
constructor(props) {
super(props);
// لتمرير الدالة كـ prop إلى الكلاس Child
this.someMethod = this.someMethod.bind(this);
}
someMethod() {
console.log('bar');
}
render() {
return (
<div>Hello Parentdiv>
);
}
}
ثم في الكلاس Child، قم بتنفيذ هذه الدالة عند الضغط على العنصر المناسب. يمكنك استدعاء هذه الدالة الممررة كـ prop على النحو التالي:
javascriptimport Parent from './parent.js';
class Child extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{/* عند النقر على العنصر، ستقوم بتشغيل الدالة الممررة كـ prop */}
<div onClick={this.props.someMethod}>Hello Childdiv>
div>
);
}
}
باستخدام هذه الطريقة، يمكنك الآن استدعاء الطريقة someMethod() التابعة للكلاس Parent من داخل الكلاس Child بنجاح، وسيتم طباعة “bar” في وحدة التحكم عند النقر على العنصر داخل الكلاس Child.
المزيد من المعلومات
بالطبع، سأكمل المقال بمزيد من التفاصيل والشروحات.
عند بناء تطبيقات React، قد تحتاج في بعض الأحيان إلى استدعاء طرق من الكائن الأب داخل الكائن الابن. هذا السيناريو شائع، خاصةً عندما تحتاج إلى تحديث حالة الكائن الأب أو تنفيذ دوال محددة في الكائن الأب من الكائن الابن.
الطريقة التي تم توضيحها في المثال السابق هي وسيلة شائعة وفعالة لتحقيق ذلك في React. ومع ذلك، هناك طرق أخرى أيضًا يمكن استخدامها لنفس الغرض، مثل استخدام context أو استخدام مكتبات لحالة الإدارة مثل Redux.
استخدام context في React
يوفر React Context وسيلة لتمرير البيانات عبر شجرة العناصر بدون الحاجة إلى تمرير الخصائص (props) يدويًا في كل مستوى. يمكن استخدام Context لتمرير الدوال أيضًا، مما يتيح لك الوصول إليها في أي مكان داخل تطبيقك دون الحاجة إلى تمريرها كـ props.
فيما يلي كيفية استخدام Context لتحقيق نفس الغرض من المثال السابق:
- تعريف Context: يمكنك تعريف Context جديدة لحفظ الدوال أو البيانات التي ترغب في مشاركتها عبر مكوناتك.
javascriptconst ParentContext = React.createContext();
- توفير القيمة: قم بتوفير القيمة التي ترغب في مشاركتها عبر مكوناتك باستخدام
javascriptclass Parent extends React.Component {
constructor(props) {
super(props);
this.someMethod = this.someMethod.bind(this);
}
someMethod() {
console.log('bar');
}
render() {
return (
<ParentContext.Provider value={{ someMethod: this.someMethod }}>
<div>Hello Parentdiv>
{this.props.children}
ParentContext.Provider>
);
}
}
- استخدام القيمة في الكائن الابن: في الكائن الابن، استخدم
ParentContext.Consumerللوصول إلى القيمة المقدمة من الكائن الأب.
javascriptclass Child extends React.Component {
render() {
return (
<ParentContext.Consumer>
{({ someMethod }) => (
<div onClick={someMethod}>Hello Childdiv>
)}
ParentContext.Consumer>
);
}
}
باستخدام Context، يمكنك تجاوز عمق شجرة المكونات والوصول إلى القيم المطلوبة بسهولة دون الحاجة إلى تمريرها كـ props في كل مرة.
الاستنتاج
في هذا المقال، تم شرح كيفية استدعاء طرق من الكائن الأب داخل الكائن الابن في React باستخدام طريقتين: تمرير الدوال كـ props واستخدام Context. كلا الطريقتين لها مزاياها وتناسب مختلف السيناريوهات، ويمكنك اختيار الأفضل بناءً على حاجات تطبيقك وتفضيلاتك الشخصية.
استخدم الأسلوب الذي يتناسب مع مشروعك ويجعل التطوير أكثر سهولة وفعالية. باستخدام هذه التقنيات، يمكنك تنظيم وتحكم في تطبيقاتك بشكل أفضل وجعلها أكثر إنتاجية وقابلية للصيانة.
