Js div在React组件中滚动到底部

Question

通过编写函数scrollToBot我遇到了问题。该函数将由componentDidMount和componentDidUpdate调用。但div不会滚动。我不知道这个功能有什么问题。我必须使用JQuery来实现这个功能吗？

提前致谢。

scrollToBot(){
    console.log(this.textAreaDiv.offsetHeight); // 4000
    if(this.textAreaDiv.offsetHeight>3000){
        console.log("should scoll!!!!!!!!!!!!!!"); // showed
        this.textAreaDiv.scrollTop=2000;
    }
    console.log('run scrollTo'); // showed
}

componentDidMount(){
    this.scrollToBot();
}

componentDidUpdate(){
    this.scrollToBot();
}

Answer 1

这在React中不起作用，因为它使用Virtual DOM来访问需要使用Refs的真正DOM元素，如React Documents中所述

Answer 2

在你的JSX中使用ref来从你的反应组件的其余部分访问dom元素。

例：

...
textAreaDiv: null

setInputRef(dom){
    this.textAreaDiv = dom
}

render(){
    <div ref={this.setInputRef}/>
}

`