REACT USEREF返回错误的错误无法读取路线上的null的属性“样式”
2021-05-28
1679
我有一个控制平滑滚动的组件的问题。刷新页面时,我没有遇到任何问题,但在 RouteChanges 上,我收到的响应是
无法读取 null 的属性“style”
显然,并且由组件中的错误
Object is perhaps 'undefined'.ts(2532)
支持,我知道在路线更改中尚未应用
ref
。但是,我不知道如何修复。查看其他有类似问题的问题,它们都建议使用
useEffect()
,我就是这么做的。我做错了什么?
组件是
const Scroll: React.FC = ({ children }) => {
const windowSize = useWindowSize();
const scrollingContainerRef = useRef();
const data = {
ease: 0.1,
current: 0,
previous: 0,
rounded: 0,
};
const setBodyHeight = () => {
if (isBrowser)
document.body.style.height = `${
scrollingContainerRef.current.getBoundingClientRect().height // Object is possibly 'undefined'.ts(2532)
}px`;
};
useEffect(() => {
setBodyHeight();
}, [windowSize.height]);
const smoothScrollingHandler = () => {
data.current = isBrowser && window.scrollY;
data.previous += (data.current - data.previous) * data.ease;
data.rounded = Math.round(data.previous * 100) / 103;
scrollingContainerRef.current.style.transform = `translateY(-${data.previous}px)`; // Object is possibly 'undefined'.ts(2532)
requestAnimationFrame(() => smoothScrollingHandler());
};
useEffect(() => {
requestAnimationFrame(() => smoothScrollingHandler());
}, []);
return (
<Wrapper>
<div ref={scrollingContainerRef}>{children}</div>
</Wrapper>
);
};
1个回答
请关注文章 https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780 。它展示了如何将 refs 与 useEffect 结合使用。
ssbarbee
2021-05-28