在React中子組件的調用方法

Question

我試圖繞過React的render()來獲取繪制到Canvas的一些更深層的組件，但是我仍然想使用React來傳遞道具等。我遇到的問題是我不知道該怎么做。像這樣對孩子調用方法。

我所擁有的基本上是：

<canvasRenderer state="active" mode={42}>
  <itemFoo fill="red" stroke="black" />
  <itemBar fill="blue" stroke="black" />
</canvasRenderer>

然后，在canvasRenderer我想執行以下操作：

constructor() {
  requestAnimationFrame(this.drawFrame);
}

drawFrame = () => {
  React.Children.forEach(children, (child) => {
    child.drawFrame(); // does not exist
  });
}

關於如何進行這項工作的任何建議？

Answer 1

如果需要在DOM元素本身上調用方法，請使用refs 。

class Child extends React.component {

  drawFrame () {
    console.log('look ma, a child method!')
  }

  render () {
    <div ref={ el => this.el = el }>Some child content</div>
  }

}

class Parent extends React.component {
  componentDidMount () {
    requestAnimationFrame(this.drawFrame);
  }

  drawFrame = () => {
    React.Children.forEach((child) => {
      child.el.drawFrame(); // does not exist
    });
  }
}