管理React/Redux中兄弟组件之间的滚动状态

Question

React组件如何控制兄弟组件的滚动位置？

Parent是父组件，它具有作为子List（其含有一个可滚动的格）和Actions与一个按钮，应控制List滚动股利滚动。

一些选项：

1. 维持滚动div的DOM元素的引用，滚动的终极版存储位置。在状态更改时触发减速器中的滚动。
2. 有Parent管理滚动条。不知何故Parent需要有一个DOM参考List滚动div，不知道如何List可以传递一个ref。
3. 使用类似react virtualized（VirtualScroll）的内容在List中显示虚拟内容。不要实际滚动，只需将内容更新为新的滚动位置即可看到的内容。这意味着我们无法制作卷轴的动画？

选项＃2似乎是最合理的（动画滚动对于此上下文非常重要），但我并不十分熟悉React/Redux中的最佳实践，以便做出好的架构决策。

Answer 1

我会去选项2.但父母不应该保留一个引用的列表项，而不是让他们作为子组件。您可以在redux存储中保存滚动位置，让父级控制它，然后将其作为道具传递给List项目。

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);