Javascript 如何将页面上的一个div与ReactJs中的许多其他div自动对焦

我的应用程序有30个div。。目前，用户可以按，它会播放声音和改变颜色

但是，om自动播放屏幕上较低的div，但我需要它聚焦并滚动到该div，这样用户就不必这样做

我看到一些使用ref的单个元素的解决方案，但每个课程（页面）都有X个div

我正在使用CRA

更新：

---

我把答案贴了出来。ScrollIntoView是关键，但我认为这个例子并不完全是我想要做的。

好吧，所以这个例子对于一件简单的事情来说相当复杂

我用两行代码找到了解决方案

对于每个div，只需添加一个REF

ref={index}

---

在我的应用程序中，用户按下一个按钮收听B C D等。。因此，当它突出显示onClick事件中的每个字母时，我必须执行以下操作：（add>>.bind）（这可以请你用一些代码简单地解释你的问题吗？你只是在寻找

scrollIntoView

？Ris。所以想想字母表A到Z在块中。用户点击A，我就可以播放声音，点击css更改。用户可以自动播放整个课程，即所有的块。但是，以后的块就看不见了。我想要代码自动聚焦那些块，这样用户就不必滚动到那个字母…可能是重复的，我仍在试图理解那个代码。看起来可能类似，但还不确定。