如何在反应中获取当前显示的 div id？答案

【问题标题】：How can I get current displayed div id in react?如何在反应中获取当前显示的 div id？
【发布时间】：2020-07-16 16:44:19
【问题描述】：

当用户滚动屏幕时，我需要知道当前显示的 div id 来设置选中的 div 键。

    <button
        type="button"
//here, I want to access current displayed div id
// I need to add some css class based on current displayed div id
className={`header_link ${
current_displayed_div_id === "Video" ? "selected" : "" // here I need to check
}`}
onClick={() => {
scrollTo(videoRef.current);
}}
>
Price
</button>

//here is my div using creatRef
<div
        className="section"
        height:
        id="Video"
        ref={videoRef} style={{ "auto" }}
>
<div>
    <div className="nav-item">
                        <span className="nav-link">
                          <i className="icofont icofont-contacts"></i>
                            {translate("video")}
                       </span>
        <div className="material-border"></div>
    </div>
</div>
<div className="mt-4 text-center">
    <div className="embed-responsive embed-responsive-16by9">
        <iframe
                src={this.props.datatab.video}
                title="video"
        >
        </iframe>
    </div>
</div>
</div>

当用户滚动屏幕时，我需要知道当前显示的 div id 来设置选择的 div 键。

【问题讨论】：

你能解释一下“当前显示的 div id”是什么意思吗？
@ourmaninamsterdam 同时用户滚动屏幕我想获得当前的 div 引用，它集中在屏幕上

标签： reactjs react-ref

【解决方案1】：

您可以使用浏览器的原生 Intersection Observer API 来跟踪某个元素是否在屏幕上，并将其集成到您的 React 组件设置中。或者您可以使用像 https://github.com/researchgate/react-intersection-observer 或 https://github.com/fkhadra/react-on-screen 这样的 React 库，它们应该可以开箱即用。

【讨论】：