web-dev-qa-db-ja.com

ReactJSどのようにコンポーネントを下にスクロールしてページに到達したときにのみレンダリングするのですか？

複数のチャートコンポーネントを含む反応コンポーネントDataがあります。 BarChartLineChart ...など.

Dataコンポーネントがレンダリングを開始すると、APIから各グラフに必要なデータを受信するまで少し時間がかかります。その後、すべてのグラフコンポーネントの応答とレンダリングを開始します。

私が必要なのは、各グラフのレンダリングを開始するonlyスクロールしてページに到達したときです。

これを達成するのに役立つ方法はありますか？

javascriptreactjsreact-chartjs
6
Shatha

ウィンドウのスクロール位置を確認し、スクロール位置がdivの近くにあるかどうかを確認できます。これを行うには、単純な反応レンダリング条件を使用できます。

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;

これはあなたを助けるかもしれません、それはただの迅速な解決策です。それはあなたにいくつかの再レンダリングアクションを生成しますので、注意してください。

1
Witold Tkaczyk