แก้ไข:ฉันตั้งค่าเป็น codesandbox: https://codesandbox.io/s/magical-poitras-yogur?file=/src/App.tsx
ฉันพยายามที่จะทำให้การกำหนดตะขอให้ div ธาตุในตอบโต้เพื่อเพิ่มเหตุการณ์ listeners.
ฉันเจอนี่'ท่านนายพล'ทางออก:
function useMyCustomHook<T extends HTMLElement>{
const myRef = useRef<T>(null)
// do something with the ref, e.g. adding event listeners
return {ref: myRef}
}
function MyComponent(){
const {ref: myElementRef} = useMyCustomHook<HTMLDivElement>()
return <div ref={myElementRef}>A Div</div>
}
จาก: ไม่สามารถกำหนด RefObject<HTMLDivElement>เพื่อ RefObject<HTMLElement>ตัวอย่าง
ซึ่งฉันจะพยายามด้วยอะไรซักอย่างในของรหัสทางด้านล่างนี้ ฉันกำลังเล่นรอบๆชั่วโมงและท้ายสุดก็ได้มันไปเดียวที่เกิดข้อผิดพลาดแต่ฉันไม่รู้ว่าจะแก้ไขมัน ข้อผิดพลาดคือในของฉัน useHover
ฟังก์ชันสำนวนที่แรก =
. เกิดข้อผิดพลาดคือ: '(' expected.ts(1005)
ขอรหัสตอนนี้:
const Hooks = (props: any) => {
const [hoverRef, hovered] = useHover();
const style = {
backgroundColor: hovered ? "red" : "",
};
return (
<div ref={hoverRef} style={style}>
<h1>Hooks!</h1>
</div>
);
};
const useHover:<HTMLDivElement extends HTMLElement> = () => {
// ERROR HERE ^ the first equal sign. '(' expected.ts(1005)
const [value, setValue] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const handleMouseOver = () => setValue(true);
useEffect(() => {
const node = ref.current;
if (node) {
node.addEventListener("mouseover", handleMouseOver);
return () => {
node.removeEventListener("mouseover", handleMouseOver);
}
}
}, []);
return [ref, value];
};
ช่วยเป็นเกียรติอย่างยิ่!