Управление состоянием прокрутки между родственными компонентами в React / Redux

Как компонент React может управлять положением прокрутки дочернего компонента?

Parent - родительский компонент, у него есть дочерние элементы List (который содержит прокручиваемый div) и Actions с кнопкой, которая должна управлять прокруткой List прокручиваемого div.

Некоторые варианты:

  1. Поддерживайте ссылку на элемент DOM прокручиваемого div и позицию прокрутки в Redux Store. Прокрутка триггера в редукторе при изменении состояния.
  2. Пусть Parent управляет прокруткой. Каким-то образом у Parent должна быть ссылка DOM на прокручиваемый div в List, не знаю, как List может пропустить ссылку.
  3. Используйте что-то вроде react virtualized (VirtualScroll), чтобы отображать виртуальный контент в List. На самом деле не прокручивайте, просто обновляйте контент до того, что будет видно в новой позиции прокрутки. Это значит, что мы не можем анимировать прокрутку?

Вариант №2 кажется наиболее разумным (в этом контексте важна анимированная прокрутка), но я недостаточно знаком с лучшими практиками в React / Redux, чтобы принимать правильные архитектурные решения.


reactjs javascript redux architecture react-redux
person David Chouinard    schedule 19.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я бы выбрал вариант 2. Но родительский элемент не должен хранить ссылку на элементы списка, кроме как иметь их в качестве дочерних компонентов. Вы можете сохранить позицию прокрутки в хранилище redux, передать ее родительскому контролю, а затем передать ее в качестве опоры для элементов списка.

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import List from './List';

class Parent extends Component {

    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        scrollPos: PropTypes.number.isRequired
    };

    updateScrollPos() {
        const value = getValueFromSomewhere();
        this.dispatch({ type: UPDATE_SCROLLPOS, value })
    }

    render() {
        return <div>
            <button onClick={::this.updateScrollPos}>Update scrollPos</button>
            <List scrollPos={this.props.scrollPos} />
            <List scrollPos={this.props.scrollPos} />
            <List scrollPos={this.props.scrollPos} />
        </div>
    }
}


const select = (state) => ({
    scrollPos: state.scrollPos
})

export default connect(select)(Parent);
person hampusohlsson    schedule 19.04.2016
comment
Ах я вижу. Довольно просто. Спасибо! - person David Chouinard; 19.04.2016