将 ref 传递给子组件以使用 GSAP 进行动画处理

Question

我是 React 的新手，我正在尝试集成 GSAP 以使用 refs 为子组件制作动画。在我将元素分离到不同的组件之前，尝试和动画的过程运行良好！

React 没有错误代码，但我确实收到以下控制台错误：

警告：不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef(( 吗？

我已经研究了提到的 forwardRef，但不确定它是否适合我想要实现的目标。

/**
* Parent Component
*/
import React, { Component } from 'react';
import Spirit from './Spirit';
import { TweenMax, Power1 } from 'gsap';
class SpiritResults extends Component {
constructor(props) {
super(props);
this.multiElements = [];
}
componentDidMount() {
TweenMax.staggerFromTo(
this.multiElements,
0.5,
{ autoAlpha: 0 },
{ autoAlpha: 1, ease: Power1.easeInOut },
0.1
);
}
render() {
return (
<ul className="mm-results">
{this.props.spirits.map(({ id, title, featImg, link, slug, index }) => (
<Spirit
key={id}
slug={slug}
title={title}
featImg={featImg}
link={link}
ref={li => (this.multiElements[index] = li)}
/>
))}
</ul>
);
}
}
/**
* Child Component
*/
import React from 'react';
const Spirit = ({ slug, link, featImg, title, index }) => (
<li id={slug} className="mm-item" ref={index}>
<a href={link}>
<div className="inner">
<img src={featImg} alt={title} />
<h3>{title}</h3>
</div>
</a>
</li>
);
export default Spirit;

任何可以让动画工作的提示将不胜感激。如果有任何更好的方法可以使用 GSAP 对反应进行动画处理，请告诉我您的想法。

谢谢

Answer 1

这里有一些错误。

• ref不是prop.您不能只是将其传递给自定义组件并像props.ref一样访问它

• 您在<li>中附加了错误的ref，index不是有效的ref对象

要将ref传递给自定义组件，您需要使用React.forwardRef并将ref附加到Child的<li>。像这样的东西

const Parent = () =>{
const ref = useRef(null)
return <Child ref={ref} title='hey i'm a prop'/>
}
const Child = React.forwardRef((props, ref) =>(
<li ref={ref}>
{props.title}
</li>
))