Как установить ссылки в React useRef

Question

Я пытаюсь воспроизвести анимацию gsap на компоненте, монтированном на сайте Gatsby, но мои ссылки не применяются.

const PricingList = ({ classes }) => {
    let pricingCard = useRef([]);

    useEffect(() => {
        console.log('start Animation', pricingCard.current);
        TweenMax.staggerFrom(pricingCard.current, 0.4, { opacity: 0, y: 100 }, 0.5);
    }, []);

    return (
        <StaticQuery
            query={graphql`
                {
                    Prices: contentfulConfig {
                        pricing {
                            priceBand {
                                title
                                price
                            }
                            priceBand2 {
                                price
                                title
                            }
                            priceBand3 {
                                price
                                title
                            }
                        }
                    }
                }
            `}
            render={(data) => (
                <Fragment>
                    <div className={classes.Container}>
                        <PricingItem
                            ref={(el) => {
                                pricingCard.current[0] = el;
                            }}
                        />
                        <PricingItem
                            ref={(el) => {
                                pricingCard.current[1] = el;
                            }}
                        />
                        <PricingItem
                            ref={(el) => {
                                pricingCard.current[2] = el;
                            }}
                        />
                    </div>
                </Fragment>
            )}
        />
    );
};

Я пытался -

pricingCard.current.push(el);

без удачи, я просто получаю пустой массив в консоли.

Я также пытался -

    useEffect(() => {
        console.log('start Animation', pricingCard.current);
        TweenMax.staggerFrom(pricingCard.current, 0.4, { opacity: 0, y: 100 }, 0.5);
    }, [pricingCard]);

Думая, что, возможно, придется ждать обновления после установки компонента, но не повезло.

Любая помощь будет принята.

Заранее спасибо.

Answer 1

Для анимации вы можете использовать useLayoutEffect вместо useEffect.

Это всегда будет 3 PricingItem с? В этом случае вы можете создать 3 отдельных ссылки для каждого (const pricingItem1 = useRef(null)) и для рендера <PricingItem ref={pricingItem1} />.

Также можете ли вы подтвердить, что была вызвана функция из рендеринга?