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

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

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