React/Reduxで兄弟コンポーネント間のスクロール状態を管理する

Question

Reactコンポーネントはどのようにして兄弟コンポーネントのスクロール位置を制御できますか？

Parentは、ListスクロールDIVのスクロールを制御する必要がありボタン児List（スクロールDIVを含む）とActionsとして有し、親コンポーネントです。

いくつかのオプション：

1. は、スクロール可能なdiv要素のDOM要素への参照を維持し、Reduxのストア内の位置をスクロールします。状態変化に対する減速器のスクロールをトリガします。
2. Parentスクロールを管理してください。どういうわけかParentはListのスクロール可能なdivへのDOM参照を持っている必要があります。どのようにListがrefを渡すことができないのかわかりません。
3. Listに仮想コンテンツを表示するには、react virtualized（VirtualScroll）のようなものを使用します。実際にはスクロールしないでください。新しいスクロール位置で表示される内容にコンテンツを更新するだけです。これは、スクロールをアニメートできないことを意味しますか？

オプション＃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);