在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
    });
  }
}