Javascript 使用React检查元素是否在视图中

请不要标记为重复。它与其他问题类似，但不同，因为我问的是将代码放在哪里，而不是如何编写

我有这段代码，想检测哪个部分在视图中：

export default class Home extends React.Component {
    render() {
        return (
            <React.Fragment>
                <div className="col_first">
                    <Scrollspy id="menu_section"
                               items={['section_1', 'section_2', 'section_3', 'section_4', 'section_5']}
                               currentClassName="is-current" className="c_nav_menu" style={{marginTop: 100}}>
                        <li className="c_nav_menu_item"><a href="#section_1">1</a></li>
                        <li className="c_nav_menu_item"><a href="#section_2">2</a></li>
                        <li className="c_nav_menu_item"><a href="#section_3">3</a></li>
                        <li className="c_nav_menu_item"><a href="#section_4">4</a></li>
                        <li className="c_nav_menu_item"><a href="#section_5">5</a></li>
                    </Scrollspy>

                    <div>
                        <li className="lines_between_1"></li>
                        <li className="lines_between_2"></li>
                        <li className="lines_between_3"></li>
                        <li className="lines_between_4"></li>
                    </div>
                </div>
                <section className="row bg_double">
                    <div className="col-lg-1">
                    </div>
                    <div className="col-lg-11  s_anim">
                        <div className="full_screen" id="section_1">
                            <div className="row full_size">
                                <div className="col-lg-12 center_in_s1">
                                    <h1 className="text_s1 gradient_text">ZdajTo</h1>
                                    <p>korepetycje on-line</p>
                                </div>
                            </div>
                            <div className="icon_border_round">
                                <a href="#section_2"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
                            </div>
                        </div>

                        <div className="full_screen" id="section_2">
                            <div className="row full_size">
                                <div className="col-lg-6 center_in">
                                    <h1> elo elo 320 </h1>
                                </div>
                                <div className="col-lg-6 center_in">
                                    <h1>Przykładowy tekst</h1>
                                </div>
                            </div>
                            <div className="icon_border_round">
                                <a href="#section_3"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
                            </div>
                        </div>

                        <div className="full_screen" id="section_3">
                            <div className="row full_size">
                                <div className="col-lg-6 center_in">
                                    <h1> elo elo 320 </h1>
                                </div>
                                <div className="col-lg-6 center_in">
                                    <h1>Przykładowy tekst</h1>
                                </div>
                            </div>
                            <div className="icon_border_round">
                                <a href="#section_4"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
                            </div>
                        </div>

                        <div className="full_screen" id="section_4">
                            <div className="row full_size">
                                <div className="col-lg-6 center_in">
                                    <h1> elo elo 320 </h1>
                                </div>
                                <div className="col-lg-6 center_in">
                                    <h1>Przykładowy tekst</h1>
                                </div>
                            </div>

                            <div className="icon_border_round">
                                <a href="#section_5"><img src={"/assets/images/ic_arrow_down_gradient.png"}/></a>
                            </div>

                        </div>


                        <div className="full_screen" id="section_5">
                            <div className="row full_size">
                                <div className="col-lg-6 center_in">
                                    <h1> elo elo 320 </h1>
                                </div>
                                <div className="col-lg-6 center_in">
                                    <h1>Przykładowy tekst</h1>
                                </div>
                            </div>

                            <div className="icon_border_round">
                                <a href="#section_1"><img src={"/assets/images/ic_arrow_up_gradient.png"}/></a>
                            </div>
                        </div>
                    </div>
                </section>
            </React.Fragment>
        )
    }
};

导出默认类Home.Component{
render（）{
返回(









兹达伊托
korepetycje在线

埃洛埃洛320
Przykładowy tekst
埃洛埃洛320
Przykładowy tekst
埃洛埃洛320
Przykładowy tekst
埃洛埃洛320
Przykładowy tekst
)
}
};

我或多或少知道怎么做

我发现这个问题：

它有一个很好的答案，指向这把小提琴：

答案中的代码

window.onscroll = function() {
  wrapper.style.backgroundColor = checkVisible(tester) ? '#4f4' : '#f44';
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

window.onscroll=function（）{
wrapper.style.backgroundColor=checkVisible（测试仪）？“#4f4”：“#f44”；
};
功能检查可见（elm）{
var rect=elm.getBoundingClientRect（）；
var viewHeight=Math.max（document.documentElement.clientHeight，window.innerHeight）；
返回！（rect.bottom<0 | | rect.top-viewHeight>=0）；
}

---

所以我的问题是我应该把这种代码放在哪里？在

componentDidMount（）

或

render（）

中？做事情的反应方式是什么？

您可以将事件代码放在componentDidMount和componentWillUnmount中

componentDidMount() {
   window.addEventListener('scroll', this.onWindowScroll);
}

componentWillUnmount() {
  window.removeEventListener('scroll, this.onWindowScroll);
}

onWindowScroll = debounce(() => { // assuming you're using https://babeljs.io/docs/plugins/transform-class-properties/
  console.log('Debounced scroll event');
}, 100)

---

如果您只想听一次scroll事件，并且您有多个这样的组件，那么您可以更聪明一点，但不确定您的用例。

我将以类似于此问题答案的方式检查

render（）

可能会触发多次，而

componentDidMount

仅触发一次，因此Joe的链接应该对您有所帮助。不过，您可能希望使用类似Rx.js或whatever@Joe，只是出于好奇，你是如何发现你链接的问题的？虽然它确实回答了我的问题，但它问的是一些不同的问题，我从来没有想过要这样搜索它。不久前，我在knockoutjs中实现了类似的东西。我会搜索“React onscroll”或类似的内容。编辑：无论是否有人链接到基本相同的答案，我仍然会选择最佳答案，因为问题完全不同。这个问题恰好得到了同样的答案。谢谢@alex.iron；）