Question

我要做什么：
创建一个onclick事件和处理程序以开始gsap动画。换句话说，处理程序要做的就是：

beginAnimation (){
  this.tl.play()
}

我尝试做的是：我从在About.js中添加一个引用开始，它被转发到Card.js，并且在我希望能够单击以开始动画的箭头上。引用在对象中向下传递，并像这样“ ref.ref2”进行访问

我试图做这样的事情：

在About.js中创建一个方法：

  beginAnimation() {
    this.tl.play();
  }

并将其传递给要渲染的卡片：

 createCards(card, i) {
    return (
      <Card
        id={i}
        key={i}
        card={card}
        info={this.state.aboutCards}
        ref={{ ref1: this["card" + i], ref2: this.button }}
        beginAnimation={this.beginAnimation}
      />
    );
  }
}

然后在Card.js中：

      <div className="prevnext">
        <button
          className="pn-btn"
          id="prev"
          ref={ref.ref2}
          onClick={props.beginAnimation}
        />

但是我收到一个错误： TypeError：无法读取未定义的属性“ tl”

我是个很新的反应者，裁判出于某种原因使我的生活困惑

Answer 1

将功能传递给另一个组件时，this是指调用该功能的组件（子组件），而不是“拥有”该功能的组件。

您可以通过以下两种方法来解决此问题，将您的道具用箭头函数包起来以封装父组件的this值：

onClick={() => props.beginAnimation()}

或将this值绑定到构造函数中的函数：

this.beginAnimation = this.beginAnimation.bind(this)

在参考

1 个答案: