ReactJS, как визуализировать компонент только при прокрутке вниз и достижении его на странице? - PullRequest
Новая
       20

ReactJS, как визуализировать компонент только при прокрутке вниз и достижении его на странице?

0 голосов
/ 13 декабря 2018

У меня есть компонент реакции Data, который включает несколько компонентов графиков;BarChart LineChart ... и т. Д.

Когда компонент Data начинает рендеринг, требуется некоторое время до получения данных, необходимых для каждой диаграммы из API, затем он начинает отвечать и отображать все диаграммыкомпоненты.

Что мне нужно, это начать рендеринг каждого графика только , когда я прокручиваю вниз и достигаю его на странице.

Есть ли какой-нибудь способ помочь мне достичьэтот??

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вы можете проверить положение прокрутки окна и, если положение прокрутки находится рядом с вашим 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;

это может вам помочь, это просто быстрое решение.Это сгенерирует вам некоторые повторные действия, так что будьте внимательны.

0 голосов
/ 13 декабря 2018

У вас есть как минимум три способа сделать это:

  1. Отслеживать, находится ли компонент в области просмотра (видимый пользователю).А затем отрендерить это.Вы можете использовать эту HOC https://github.com/roderickhsiao/react-in-viewport

  2. Отслеживать позицию прокрутки 'y' явно с помощью https://react -fns.netlify.com / docs / en / api.html # scroll

  3. Напишите свой собственный HOC с помощью Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Для визуализации компонента вам может понадобиться другой HOC, который вернет компонент Chart или 'null'на основании реквизита, который он получает.

...