react-intersection-observer 僅適用於最后一個元素

Question

我正在嘗試使用react-intersection-observer構建延遲加載功能，目標是只加載位於視口中的框中的圖像。

• 目前，當我滾動到最后一個元素時——它會渲染出盒子的所有圖像。
• 但是當我向上滾動並且最后一個框超出視口時，頂部的所有內容都會消失。
• 如果我打印出inView ，當滾動到最后一個元素時它變為true ，當最后一個元素離開視口時變為false 。

如何解決這個問題，讓它只渲染出視口中的框？

---

演示動圖：

---

我的代碼：

應用程序.js

export const AppContext = createContext();

function App() {
  const { ref, inView, entry } = useInView({
    rootMargin: "50px 0px",
    initialInView: true
    // triggerOnce: true,
  });

  return (
    <AppContext.Provider value={{ ref, inView, entry }}>
      <div className="App">
        <Posts />
      </div>
    </AppContext.Provider>
  );
}

export default App;

Post.js

import { useContext } from 'react'
import { AppContext } from '../App'

function Post({ post }) {
  const { ref, inView } = useContext(AppContext)
  return (
    <div className="post" ref={ref}>
      {inView ? 
        <img src={post.imgUrl} alt={post.title} className="post__img" loading="lazy" />
        : <div className="post__img" />
      }
      <h1 className="post__title">{post.title}</h1>
    </div>
  )
}

export default Post

更新：

我更新了下面的 Codesandbox 鏈接以將useInView移動到Post.js並刪除了 Context API。現在可以使用了！

Answer 1

首先，您使用的是上下文，它維護一個 state 但在您的情況下，您希望單獨跟蹤所有帖子項目，因此，

只需將useInView鈎子放入 Post.js 的每個組件中，並將其從 App.js 中刪除