我正在尝试使用 material-ui's useScrollTrigger使用 window
以外的目标,如下所示:
export default props => {
let contentRef = React.createRef();
const scrollTrigger = useScrollTrigger({ target: contentRef.current });
return (
<React.Fragment>
<CustomHeader shrink={scrollTrigger} />
<div ref={contentRef}>
{props.children}
</div>
</React.Fragment>
);
};
这会导致抛出错误,因为在调用 useScrollTrigger
时 contentRef.current
为 null。将子元素作为目标时,此实用程序的正确用法是什么?
最佳答案
你是对的,因为组件第一次渲染 contentRef.current 是 null,所以会抛出一个错误。
我们需要两件事,一个是对目标元素的引用,另一个是重新渲染的方式,以便我们的 scrollTrigger 被重新计算。换句话说,我们需要一个状态。
下面的代码可以工作
export default props => {
// please keep it undefined here to not make useScrollTrigger throw an error on first render
const [scrollTarget, setScrollTarget] = useState(undefined)
const scrollTrigger = useScrollTrigger({ target: scrollTarget });
return (
<React.Fragment>
<CustomHeader shrink={scrollTrigger} />
<div ref={node => {
if (node) {
setScrollTarget(node);
}
}}>
{props.children}
</div>
</React.Fragment>
);
};
关于javascript - material-ui useScrollTrigger 与子目标 ref 的用法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56551045/