react-intersection-observer 仅适用于最后一个元素
react-intersection-observer only works with the last elements
我正在尝试使用 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。现在可以使用了!
首先,您使用的是上下文,它保持单一状态,但在您的情况下,您希望单独跟踪所有 post 项,因此,
只需将 useInView 挂钩放入 Post.js 的每个组件中,然后将其从 App.js
中移除
我正在尝试使用 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。现在可以使用了!
首先,您使用的是上下文,它保持单一状态,但在您的情况下,您希望单独跟踪所有 post 项,因此,
只需将 useInView 挂钩放入 Post.js 的每个组件中,然后将其从 App.js
中移除