如何在 React useRef 中设置 refs

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。

它会总是 3PricingItem秒吗？在这种情况下，您可以为每个 (const pricingItem1 = useRef(null)( 和渲染<PricingItem ref={pricingItem1} />创建 3 个单独的引用。

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