useEffect 中的 intersectionobserver 只觸發一次

Question

我試圖在觀察時打開和關閉 class 樣式，但它只工作一次。 我想它可以用 obs.unobserve 或 obs.disconnect 解決，但我沒有以正確的方式編寫代碼。 這是代碼。 （簡化）

    useEffect(() => {
        const obs = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.intersectionRatio > 0) {

                    $('.class-a').addClass('white');
                }
                else {
                   
                    $('.class-a').addClass('black');
                }

            })
        }, { threshold: [0.5] });
        obs.observe(document.querySelector('.sub'));

    }, [])

Answer 1

您只查詢一個選擇器。 如果要查詢多個，則必須使用document.querySelectorAll() 。

編輯試試這個（自己查詢它們是行不通的，實際上也必須遍歷它們）：

const list = document.querySelectorAll('.sub');
list.forEach((el) => {
  obs.observe(el);
})

參考這些 mdn 文檔

工作非反應測試： https://codepen.io/shikkaba/pen/eYMVXXX