Я настоятельно рекомендую добавить дополнительную проверку вашего состояния.При прокрутке по одному разу состояние компонента обновляется несколько раз после определенного диапазона (100), что не является необходимым.Вам нужно обновить его только один раз.
Обновление будет продолжаться, потому что вы соответствуете условиям внутри handleScroll
, даже если фон уже изменился.Огромное количество обновлений может привести к сбою вашего приложения.
Попробуйте что-то вроде этого, оно обновит ваше состояние компонента, как ожидается, и только при необходимости: https://codesandbox.io/s/white-architecture-jepyc
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
navBckgroundColor: `blue`,
altered: false
};
}
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
}
//use arrow function instead so that its "this" keyword points to the component's execution context. Otherwise, "this" will point to the global window object where you cannot use this.setState.
handleScroll = e => {
if (window.pageYOffset > 100 && !this.state.altered) {
this.setState({
navBckgroundColor: `red`,
altered: true
});
} else if(window.pageYOffset < 100 && this.state.altered) {
this.setState({
navBckgroundColor: `blue`,
altered: false
});
}
};
render() {
return (
<div className="App">
<Navbar bckGroundColor={this.state.navBckgroundColor} />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
}