我有一个聊天窗口小部件，每次向上滚动时都会拉起一组消息。我现在面临的问题是，当消息加载时，滑块保持固定在顶部，我希望它专注于前一个数组的最后一个索引元素。我想通了，我可以通过将指标进行动态裁判，但我也需要知道使用什么样的滚动功能的实现是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