Question

我正在尝试在Gatsby网站上安装的组件上播放gsap动画，但我的参考文件未得到应用。

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秒？在这种情况下，您可以为每个（const pricingItem1 = useRef(null)）和渲染<PricingItem ref={pricingItem1} />创建3个独立的引用。

还可以确认渲染道具中的函数已被调用吗？

如何在React useRef中设置引用

1 个答案: