• 0

تحديث مكون React عند التمرير onScroll

 

لقد قمت بإنشاء مكون React ومن المفترض أن يقوم بتحديث التنسيقات الخاصة به عند تمرير الصفحة. كود المكون كالتالي:

let componentStyle = { backgroundColor: 'white' };

window.addEventListener('scroll', (event) => {
  componentStyle.backgroundColor = 'black');
});

return (
  <div style={componentStyle}></div>
);

لكن هذا الكود لا يعمل على الإطلاق، وأعتقد أن السبب هو أن React لا يعلم أن المتغير componentStyle قد تغير وبالتالي لا يتم عمل render للمكون مرة أخرى، وبالطبع حاولت أن أخزن هذه القيمة في state وتعديلها من خلال setState ولكن هذا الأمر يجعل عملية التمرير إلى الأسفل بطيئة للغاية، هل يوجد حل آخر غير هذا الأمر؟

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

هنا انت تحاول تعمل mutate لل object هذا سيسبب خطأ

window.addEventListener('scroll', (event) => {
  componentStyle.backgroundColor = 'black');
});

للوصول لمبتغاك حاول اتباع الشيفرة في الاسفل 

import { useEffect, useState } from 'react';

function App() {
  const [bg, setBg] = useState('white');
  useEffect(() => {
    window.addEventListener('scroll', (event) => {
      setBg('red');
    });
    return () => {
      window.removeEventListener('scroll', (event) => {
        setBg('red');
      });
    };
  }, []);

  return (
    <div style={{ backgroundColor: bg }} >
      ....
    </div>
  );
}

export default App;

Animation.thumb.gif.77d38a0c588cdd7f46cc1c7a86047960.gif

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

لايمكن تغيير قيمة المكونات بعد الإنشاء إلا عن طريق تغيير الحالة. يجب علينا في هذه الحالة عمل مستمع أحداث و ربطه ب componentDidMount بعمل bind ب this و سوف تصبح الشيفرة:

 

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let componentStyle = { backgroundColor: 'white' };
	
	if (..) 
    this.setState({
      componentStyle.backgroundColor = 'black'
    });
},

أو يمكنك تطبيق الدالة التي تغير اللون بتطبيق مستمع حدث التمرير مباشرة على العنصر:

<ScrollableComponent
 onScroll={this.handleScroll}
/>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن