Question

我有一个列表，我想滚动到底部，我的组件编码如此

class Msg extends Component {

    componentDidUpdate() {

        if(this.container){
            this.container.scrollTop = this.container.scrollHeight
        }
    }

    render() {
        return(
            <div ref={elem = this.container = elem}>
                <Item />
                <Item />
                <Item />
            </div>
        )
    }
}

有效。但问题是每次组件重新渲染时都会滚动。 Msg有很多子组件，触发子组件的状态会导致Msg组件再次渲染，如何解决这个问题？

像普通用户一样解释：

用户向上滚动列表，然后点击某处的下拉列表，触发componentDidUpdate，导致滚动到底部。

Answer 1

要在渲染组件时第一次滚动到底部，您应该使用componentDidMount生命周期钩子。

如果您希望每次添加元素时滚动列表，您可以使用componentDidUpdate挂钩，就像您现在使用的那样，但不是每次都操作滚动顶，而是检查您渲染的项目数是否有改变。现在，每次组件更新时都要设置滚动顶部。

componentDidUpdate将先前的道具和先前的状态作为参数获取，因此您可以编写如下内容：

componentDidUpdate(prevProps, prevState) {
    if (this.props.items.length > prevProps.items.length) {
        this.refs.container.scrollTop = this.refs.container.scrollHeight;
    }
}

这里有一个很好的参考，用于响应生命周期钩子：http://busypeoples.github.io/post/react-component-lifecycle/

Answer 2

使用这样的东西在列表末尾添加一个空白div

<div ref="blankdiv"></div>

然后在每个componentDidMount中滚动此屏幕中的div

this.refs.blankdiv.scrollIntoView()

componentDidUpdate在加载项目时滚动到底部

2 个答案: