在 React/Redux 中管理兄弟組件之間的滾動狀態

Question

React 組件如何控制兄弟組件的滾動位置？

Parent是父組件，它有子List （它包含一個可滾動的 div）和帶有按鈕的Actions ，該按鈕應該控制List可滾動 div 的滾動。

一些選項：

1. 在 Redux Store 中維護對可滾動 div 和滾動位置的 DOM 元素的引用。 在狀態更改時觸發減速器中的滾動。
2. 讓Parent管理滾動。 不知何故Parent需要對List的可滾動 div 進行 DOM 引用，不確定List如何傳遞引用。
3. 使用類似react virtualized ( VirtualScroll ) 的東西在List顯示虛擬內容。 不要實際滾動，只需將內容更新為在新滾動位置看到的內容。 這意味着我們不能為滾動設置動畫？

選項#2 似乎最合理（動畫滾動對於這種情況很重要），但我對 React/Redux 中的最佳實踐不夠熟悉，無法做出良好的架構決策。

Answer 1

我會選擇選項 2。但是除了將它們作為子組件之外，父級不應該保留對 List 項的引用。 您可以將滾動位置保存在 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);