دمج خطافات React مع مكونات الفئة الكلاسيكية

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

ضع في اعتبارك مكون الفئة التالي:

class MyDiv extends React.component {
   constructor() {
      this.state = { sampleState: 'hello world' };
   }
   render() {
      return 
{this.state.sampleState}
;
   }
}

لإضافة رابط إلى هذا المكون، قم بإنشاء ملف ذو ترتيب عالي يغلف المكون ويوفر قيمة الخطاف كدعم:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

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

class MyComponent extends React.Component {
  render() {
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

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