react-intersection-observer 仅适用于最后一个元素

Question

我正在尝试使用 react-intersection-observer 构建延迟加载功能，目标是仅加载位于视口中的框中的图像。

目前，当我滚动到最后一个元素时 - 它会渲染出所有框的图像。
但是当我向上滚动并且最后一个框超出视口时，顶部的所有内容都会消失。
如果我打印出 inView，当滚动到最后一个元素时会变成 true，当最后一个元素离开视口时会变成 false。

如何解决这个问题，让它只渲染视口中的框？

演示 gif：

我的代码：

App.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 link 以将 useInView 移动到 Post.js 并删除了上下文 API。现在可以使用了！

Answer 1

首先，您使用的是上下文，它保持单一状态，但在您的情况下，您希望单独跟踪所有 post 项，因此，

只需将 useInView 挂钩放入 Post.js 的每个组件中，然后将其从 App.js

中移除

react-intersection-observer 仅适用于最后一个元素

react-intersection-observer only works with the last elements

javascript

reactjs

ref

intersection-observer

react-intersection-observer

演示 gif：

我的代码：

更新：