我希望能夠選擇styles.scrollValue使用document.querySelector()
import { useEffect } from "react";
import styles from "./Navbar.module.scss";
const Navbar = () => {
const handleScroll = () => {
document.querySelector(styles.scrollValue).innerHTML = scrollY;
};
useEffect(() => {
document.addEventListener("scroll", handleScroll);
return () => {
document.removeEventListener("scroll", handleScroll);
};
});
return (
<nav className={styles.navbar}>
<div className={styles.content}>
<h1 className={styles.scrollValue}>0</h1>
</div>
</nav>
);
};
運行此代碼我收到一個錯誤：
型別錯誤：document.querySelector(...) 為空
我知道我可以向該元素添加一個全域類：
className={`${styles.scrollValue} scrollValue`}
但這會破壞使用 CSS 模塊的優勢。
有沒有辦法選擇 CSS Module 類而不添加另一個類？
uj5u.com熱心網友回復：
你需要選擇它作為一個類，
document.querySelector(`.${styles.scrollValue}`)
呼叫styles.property回傳一個值，如下所示，
scrollValue: '_src_styles_module__scrollValue'
因此，當您呼叫 document.querySelector 時，它正在尋找_src_styles_module__scrollValue沒有選擇器型別 such.或#使其尋找匹配元素的元素<_src_styles_module__scrollValue>（在這種情況下）。由于沒有具有該名稱或散列名稱的元素，它將回傳 null。
作業演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322359.html
上一篇：關于rwd的布局
下一篇：如何將影像最適合固定比例？