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

Question

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

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

Некоторые опции:

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

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

Answer 1

Я бы выбрал вариант 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);