我正在嘗試制作一個組件，當它在我的主要組件中的 div 標簽“ infoBG ”中被參考時，它會在滾動時更新其源影像。該函式似乎可以作業，但我猜 return 陳述句覆寫了該函式，并且只回傳原始影像而不更新。這樣做的正確方法是什么，以便函式更新第一個回傳的影像？
function Infoimg () {
window.addEventListener("scroll", event => {
var scrollValue = window.scrollY;
var image = document.getElementById('infoBG');
if (scrollValue>100){
image.setAttribute = ('src','images/ccpLogo.svg');
}else{
image.setAttribute = ('src','images/Passport Stock Photo.svg');
}
console.log(image)
console.log(scrollValue);
});
return(
<img src={'images/Passport Stock Photo.svg'} alt='Info-Background'/>
)
}
uj5u.com熱心網友回復：
在 React 中直接操作 DOM 通常是個壞主意。相反，依靠鉤子和狀態來更新將被插入到模板中的變數。
useState在這種情況下，使用鉤子創建一個新狀態以允許讀取和寫入您的影像 URL，然后使用回傳的 setteruseState來更新值是有意義的。
此外，一些小技巧：
- 您應該
useEffect()在渲染時使用并添加事件偵聽器 - 您還應該回傳一個函式
useEffect()以確保正確洗掉滾動事件偵聽器以避免潛在的記憶體泄漏并允許垃圾收集 - 您可以將 if/else 陳述句簡化為簡單的三元陳述句
- 您可能希望
onScroll()第一次手動呼叫，特別是如果用戶可能到達帶有快取滾動位置的頁面（即用戶不是從頁面頂部開始）
考慮到所有這些要點，這是您的代碼的改進版本：
const [image, setImage] = useState('images/Passport Stock Photo.svg');
useEffect(() => {
const onScroll = () => {
setImage(window.scrollY > 100 ? 'images/ccpLogo.svg' : 'images/Passport Stock Photo.svg');
};
// Note: Listen to scroll event
window.addEventListener('scroll', onScroll);
// Optional: Handle scenario where user arrives at a pre-scrolled position (non-zero scrollY on load)
onScroll();
// Note: Clean up to avoid memory leaks
return () => {
window.removeEventListener('scroll', onScroll);
};
}, []);
return (
<img src={image} alt="Info-Background" />
);
uj5u.com熱心網友回復：
您基本上需要使用useRef，這可能對性能更好。請記住，這useState將觸發重新渲染。但實際上，您只需要更新影像的來源即可。我會使用這樣的東西。
import { useCallback, useEffect, useRef } from "react";
import "./styles.css";
export default function App() {
const imgRef = useRef();
const middleRef = useRef();
const onScroll = useCallback(() => {
if (imgRef != null) {
var scrollValue = window.scrollY;
if (scrollValue > 100) {
imgRef.current.src = "https://picsum.photos/id/237/200/300";
} else {
imgRef.current.src = "https://picsum.photos/seed/picsum/200/300";
}
console.log(scrollValue);
}
}, []);
useEffect(() => {
window.addEventListener("scroll", onScroll, true);
return () => {
window.removeEventListener("scroll", onScroll, true);
};
}, [onScroll]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div ref={middleRef} className="middle" />
<img
ref={imgRef}
src={"https://picsum.photos/seed/picsum/200/300"}
alt="Info-Background"
/>
</div>
);
}
鏈接在這里。您可以在代碼沙箱上檢查它。 https://codesandbox.io/s/ecstatic-https-hzi5n
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/424922.html
標籤：javascript 反应 功能 滚动 返回
上一篇：Python最終阻止不捕獲錯誤
下一篇：C Esp32函式式無限回圈