Как используется материал-ui useScrollTrigger с дочерней целевой ссылкой?

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>
    );
};

Это вызывает ошибку, потому что contentRef.currentноль, когда useScrollTrigger вызывается.Как правильно использовать эту утилиту с дочерними элементами в качестве цели?

Answer 1

Вы были правы, так как в первый раз компонент визуализирует 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>
    );
};

Answer 2

Я бы попробовал что-то вроде этого:

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