J'ai un composant react Data
qui comprend plusieurs composants graphiques; BarChart
LineChart
... etc.
Lorsque le composant Data
commence le rendu, cela prend un certain temps avant de recevoir les données requises pour chaque graphique à partir des API, puis il commence à répondre et à rendre tous les composants du graphique.
Ce dont j'ai besoin, c'est de commencer à afficher chaque graphique niquement lorsque je défile vers le bas et que je l'atteins sur la page.
Existe-t-il un moyen de m'aider à y parvenir?
vous pouvez vérifier la position de défilement de la fenêtre et si la position de défilement est proche de votre div - affichez-la. Pour ce faire, vous pouvez utiliser des conditions de rendu React simples.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
constructor(props){
super(props);
this.state = {
elementToScroll1: false,
elementToScroll2: false,
}
this.firstElement = React.createRef();
this.secondElement = React.createRef();
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(e){
//check if scroll position is near to your elements and set state {elementToScroll1: true}
//check if scroll position is under to your elements and set state {elementToScroll1: false}
}
render() {
return (
<div>
<div ref={this.firstElement} className={`elementToScroll1`}>
{this.state.elementToScroll1 && <div>First element</div>}
</div>
<div ref={this.secondElement} className={`elementToScroll2`}>
{this.state.elementToScroll2 && <div>Second element</div>}
</div>
</div>
);
}
}
MyComponent.propTypes = {};
export default MyComponent;
cela peut vous aider, c'est juste une solution rapide. Cela vous générera des actions de rendu, alors soyez conscient.