我正在嘗試創建一個跟蹤垂直滾動的組件。問題是——實際的滾動容器不容易預測（在這種特定情況下，它既不是window，document也不是body——它是div#__next，由于 CSS 溢位規則）。
我想保持組件的靈活性和獨立性。所以我創建了一個ref帶有 DOM 的選擇器作為引數。我知道這遠非慣用語（至少可以說），但令人驚訝的是，它似乎在起作用：
// Parent component
import { useRef } from "react"
const Article = (props) => {
const scrollContainerRef = useRef<HTMLElement | null>(
document.querySelector("#__next") // <-- the scroll container reference
)
return (
<SomeContent>
<ScrollToTop treshold={640} ref={scrollContainerRef} />
</SomeContent>
)
// ScrollToTop
const ScrollToTop = forwardRef(
({ treshold }, ref) => {
const [visible, setVisible] = useState(false)
useEffect(() => {
if (ref?.current) {
ref.current.addEventListener("scroll", throttle(toggleVisible, 300))
return () => {
ref.current.removeEventListener("scroll", throttle(toggleVisible, 300))
}
}
}, [])
// …
所以有什么問題？當前一個是 Typescript。我花了幾個小時試圖讓型別正確，但無濟于事。父組件是紅色波浪線免費（除非我通過globalThis，這似乎至少在 CodeSandbox 中作業），但ScrollToTop每當我訪問current屬性時，它就會出現：
Property 'current' does not exist on type 'ForwardedRef<HTMLElement>'.
我嘗試React.MutableRefObject<HTMLElement | null /* or other T's */>在父母和孩子中使用，但沒有幫助。
任何想法如何讓型別匹配？或者這從一開始就是一個愚蠢的想法？
CodeSandbox 演示
uj5u.com熱心網友回復：
Refs可能是具有.current屬性的物件，但它們也可能是函式。因此，您不能假設轉發的 ref 具有.current屬性。
我認為forwardRef在這里使用是一個錯誤。的目的forwardRef是允許父組件訪問子組件中的元素。但是相反，父元素是找到元素的人，然后您將其傳遞給子元素以供其使用。我會為此使用常規狀態和道具：
const Article = (props) => {
const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(() => {
return document.querySelector("#__next");
});
return (
<SomeContent>
<ScrollToTop treshold={640} scrollContainer={scrollContainer} />
</SomeContent>
)
interface ScrollToTopProps {
treshold: number;
scrollContainer: HTMLElement | null;
}
const ScrollToTop = ({ treshold, scrollContainer }: ScrollToTopProps) => {
const [visible, setVisible] = useState(false);
useEffect(() => {
if (scrollContainer) {
const toggle = throttle(toggleVisible, 300);
scrollContainer.addEventListener("scroll", toggle);
return () => {
scrollContainer.removeEventListener("scroll", toggle);
}
}
}, [scrollContainer]);
// ...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/409697.html
標籤：
上一篇：回傳泛型時的打字稿推理錯誤