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

react-intersection-observer only works with the last elements

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

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


演示 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。现在可以使用了!

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

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

中移除