html画布和绘图在单独的组件中

Question

构建类似CAD的应用程序我有一个包含画布的组件。在componentDidUpdate中绘制图形

render() {   
  return <canvas ref={c => this.canvas = c}/> 
}

componentDidUpdate() {
   // drawing
   const context = canvas.getContext("2d");  
   ....
}

我想将图形分成一个单独的组件。

render() {   
  return (
    <canvas ref={c => this.canvas = c}/> 
    <Drawing ref={c => this.drawing = c} 
             getCanvas={() => this.canvas} />
  );
}

componentDidUpdate() {
   this.drawing.draw();
}

const context = canvas.getContext("2d");  
   ....
}

// drawing component
class Drawing extends Component {
  draw() {
    const context = this.props.getCanvas.getContext("2d");
    ...
  }

  render() { return null }
}

那很好，但看起来并不优雅（调用this.drawing.draw()看起来很糟糕）。然后，我想将该绘图组件连接到redux。 但是比在Drawing组件中，我必须使用render，如果redux-store发生了更改，那么该调用称为

。

我很困惑该怎么做。使用render函数吗？