没有参考的React中的ScrollIntoView？

【问题标题】：ScrollIntoView in React without refs?没有参考的React中的ScrollIntoView？
【发布时间】：2020-06-11 19:23:09
【问题描述】：

我有一个很大的项目/div 列表，我需要以编程方式创建，我需要为每个项目/div 实现 scrollIntoView 按钮。我知道如何使用 refs。

是否有比 refs 更高效的替代方法？

【问题讨论】：

如果您的 onClick 回调使用事件目标本身来查找（或成为）要滚动到的元素，则您不必使用 refs

【解决方案1】：

我相信这样的事情会奏效：

onScrollClick(ev) {
    ev.target.scrollIntoView();
}

render() {
    return (
           ... <button onClick={this.onScrollClick}>Scroll This Element Into View</button>
      )
}

假设您想将按钮本身滚动到视图中。如果这不是你想要的，你就必须具体。

[edit] 如果不是元素本身，而是元素父元素之一，您还可以使用 javascript api 找到父元素，element.parentElement - 您可以根据需要多次使用它来查找相关元素.

【讨论】：