material-ui useScrollTrigger 与 child target ref 的用法是什么？

Question

我正在尝试将material-ui 的 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。 将此实用程序与子元素作为目标的正确用法是什么？

Answer 1

你是对的，因为组件第一次呈现 contentRef.current 是空的，所以会抛出一个错误。

我们需要两件事，一个是对目标 Element 的引用，另一个是重新渲染以便再次计算 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>
    );
};

Answer 2

对于感觉被忽视的打字稿用户，让我为您节省几个小时的时间来找出合适的打字方式：

const [scrollTarget, setScrollTarget] = useState<Node | Window | undefined>()
const scrollTrigger = useScrollTrigger({ target: scrollTarget });

Answer 3

我会尝试这样的事情：

 const scrollTrigger = useScrollTrigger(() => {{ target: contentRef.current }});