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

在React中调用子组件的方法

1 个答案: