Question

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

Parent是父组件，它有子List（包含可滚动的div）和Actions，其中有一个按钮，可以控制滚动List可滚动格。

一些选项：

维护对可滚动div的DOM元素的引用，并在Redux Store中滚动位置。在减速器中触发滚动状态更改。
让Parent管理滚动条。不知何故，Parent需要对List中的可滚动div进行DOM引用，不确定List如何传递参考。
使用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);

在React / Redux

1 个答案: