ReactでのDOMの取得の仕方
コードは以下の通りです。
**やりたいこととできないこと**
現在、Reactを使ってintersectionobserverを使用したいです。
しかし機能しません。
原因としては、DOMを獲得できていないことがconsole.logを使用して分かりました。
しかし、React初学者ということもあり、他のコードでのDOMの取得方法がわかりません。
**何を・どのように調べたのか**
上記を解決するために、以下のキーワードで検索しました。
・ref 使い方
・react dom 取得 仕方
参考にした記事のURLは以下です。 ・https://~
・https://www.it-swarm.dev/ja/reactjs/react%E5%AD%90%E8%A6%81%E7%B4%A0%E3%81%8B%E3%82%89dom%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/1052236765/
・https://qiita.com/tonio0720/items/c265b9b65db3bb76f2d3
**何が原因だと思うか**
調べた結果、原因は以下ではないかと考えています。
query.selectorは、HTMLからデータを取っ手来るもので、
jsxから取ってきていないのが原因だと思うのですが、
jsxのclassNameを取得するやり方が分かんないです、、、
const Intersecting = () => {
const child = document.getElementsByClassName(".makeStyles-base-24");
console.log(document.querySelector(".makeStyles-base-24"));
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");
}
});
// alert('intersecting');
};
const options = {
root: null,
rootMargin: "-300px 0px",
threshold: [0, 0.5, 1],
};
const io = new IntersectionObserver(cb, options);
return <div className=""></div>;
};
0