我有一個聊天窗口小部件，每次向上滾動時都會拉起一組消息。我現在面臨的問題是，當消息加載時，滑塊保持固定在頂部，我希望它專注於前一個數組的最後一個索引元素。我想通了，我可以通過將指標進行動態裁判，但我也需要知道使用什麼樣的滾動功能的實現是ReactJS如何滾動到一個元素
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
只要找到你已經確定的元素的頂部位置https://www.w3schools.com/Jsref/prop_element_offsettop.asp然後通過scrollTo方法滾動到該位置https://www.w3schools.com/Jsref/met_win_scrollto.asp
像這樣的東西應該工作：
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
window.scrollTo(0, tesNode.offsetTop);
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
這是更好的答案。使用'ReactDOM.findDomNode（）'是更好的做法 - 因爲React會重新渲染組件，所以當您調用函數 –
時，您通過ID獲得的div可能不存在根據官方文檔，您應該儘量避免使用'findDOMNode'。在大多數情況下，你可以附加一個ref到DOM節點，並且完全避免使用'findDOMNode'。 –
您可以使用類似componentDidUpdate
componentDidUpdate = function() {
var elem = document.getElementById('yourId');
elem.scrollTop = elem.scrollHeight;
};
使用findDOMNode最終將被棄用。
首選的方法是使用回調引用。
https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220
對於捆綁式解決方案：https://www.npmjs.com/package/react-scroll-to-component – tokland