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

Adam Ebrahim · 13 مايو 2021

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

let componentStyle = { backgroundColor: 'white' };

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

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

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

Wael Aljamal · 13 مايو 2021

لايمكن تغيير قيمة المكونات بعد الإنشاء إلا عن طريق تغيير الحالة. يجب علينا في هذه الحالة عمل مستمع أحداث و ربطه ب 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}
/>

Salah Eddin Beriani2 · 13 مايو 2021

هنا انت تحاول تعمل 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;