ChungHa Brocher_3 : 2021.05.03 Intersection Observer && Typescript
5403 ワード
Code
const TotalPictureContainer = styled.div`
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
padding-top: 10vh;
`;
const Pictures = () => {
const [pictureNumber, setPictureNumber] = useState(3);
const observer = useRef(null);
const { loading, pictures, hasMore } = GetPictureData(pictureNumber);
// lastPictElementRef 에 해당하는 element가 create되면
// 아래의 함수를 호출하게 된다
// pictComponent는 해당 dom node가 들어오게 된다
const lastPictElementRef = useCallback(
(pictComponent) => {
console.log("lastBook Element");
// observer가 존재한다면 , disconnect -> 왜 ? reconnect할 것이기 때문
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {
// on single element만 watch 한다
if (entries[0].isIntersecting && hasMore) {
setPictureNumber((prevNum) => prevNum + 3);
}
});
// if sth is actually our last element ,
// observer가 해당 요소를 observe 하게 만든다
if (pictComponent) observer.current.observe(pictComponent);
},
[hasMore]
);
return (
<TotalPictureContainer>
{pictures[0] &&
pictures.map((picture, idx) => {
if (pictures.length === idx + 1) {
return (
<SinglePicture
key={picture.idx}
ref={lastPictElementRef}
IsOdd={idx % 2 ? false : true}
Image={picture}
/>
);
} else {
return (
<SinglePicture
key={picture.idx}
IsOdd={idx % 2 ? false : true}
Image={picture}
/>
);
}
})}
</TotalPictureContainer>
);
// return null
};
export default Pictures;
Error 1
Object is possibly 'null'.
if (observer.current) observer.current.disconnect();
It seems to be related withconst observer = useRef(null);
how do I have to define "useRef"when I am using "Intersection Observer"?Trial 1
const observer = useRef<IntersectionObserver>(null);
Following Error
Cannot assign to 'current' because it is a read-only property.
if (observer.current) observer.current.disconnect();
> 26 | observer.current = new IntersectionObserver((entries) => {
Why ?
I have to use a React ref as a mutable instance, so that I can assign 'intersection observer' related code to 'observer.current'
Then how ??
Solution
const observer = useRef<IntersectionObserver | null>(null);
we have to additionally assign 'null' type to 'initial value'which allow us to make 'observer' variable 'mutable'
Reference
この問題について(ChungHa Brocher_3 : 2021.05.03 Intersection Observer && Typescript), 我々は、より多くの情報をここで見つけました https://velog.io/@dhsys112/ChungHa-Brocher3-2021.05.03-Intersection-Observer-Typescriptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol