react交集观测器只适用于最后一个元素。

Question

我试图用react-intersection-observer构建延迟加载功能，目标是只在视图中加载图像。

• 当前，当我滚动到最后一个元素时，它将呈现出所有框的图像。
• ，但是当我向上滚动，最后一个框从视图中消失时，顶部的所有东西都会消失。如果打印出inView，这会在滚动到最后一个元素时转到true，当最后一个元素不在视口时就会变成false。H 210f 211

如何解决此问题，使其只呈现出视图中的框？

演示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链接，将useInView移动到Post.js，并删除了上下文API。现在起作用了！

​

​

Answer 1

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

只需将useInView钩子放入Post.js的每个组件并从App.js中删除它即可。