ReactでのDOMの取得の仕方
コードは以下の通りです。
**やりたいこととできないこと**
App.jsxのコンポーネントに今回のintersectionの機能を反映させたいのですが
それをどのような配置で置いたりすればいいのかが分からなく、
それが原因で動かないとおもいます。
Intersection.js
import React, { useRef, useEffect, useState } from "react";
import App from "../../App";
export const Intersection = () => {
// コンポーネントがマウントした後、渡した関数を実行する
useEffect(() => {
const child = document.getElementById("BackScroll__4");
debugger;
if (child) {
/* ここにIntersectionObserverなどの処理 */
const cb = function (entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("inview");
// observer.unobserve(entry.target);
} else {
entry.target.classList.remove("inview");
}
const options = {
root: null,
rootMargin: "-300px 0px",
threshold: [0, 0.5, 1],
};
const io = new IntersectionObserver(cb, options);
io.observe(child);
});
};
}
}, []); // 第二引数に空配列を渡す！
return (
<div>
<Intersection>
<App />
</Intersection>
</div>
);
};
export default Intersection;
returnの書き方もこれで良いのか分かりません。
0