Question

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

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
您在ref内添加了错误的<li>，index不是有效的ref对象

要将ref传递到自定义组件，您需要使用React.forwardRef并将ref附加到Child的{{1}}上。像这样

<li>

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

1 个答案: