ReactでCanvasを使う時の子コンポーネントの書き方

Question

React.jsでアプリを作っており、Canvasを使って要素を描画したいのですが、うまく親子のコンポーネントに分けられません。
今考えている構造は

• ParentコンポーネントでCanvasを定義
• Childコンポーネントで1つの要素を描画（丸）
• Child2コンポーネントで1つの要素を描画（三角）

といった構成です。

親コンポーネントでcanvas要素を作って、子コンポーネントごとに描画したいものを描こう…と思ったのですが、canvas要素はcanvasからcontextを作って、それに対してfillStyleなどを指定していく形なので、うまく子コンポーネントにできませんでした。
API通信の結果を使って描画するので、上記のような構成で分けたいのですが、どのようにわければいいでしょうか。

なお、現在はQiitaを参考に、下記のように書いています。

import React, { Component } from 'react';

export default class Canvas extends Component {
  componentDidMount() {
    this.updateCanvas();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.updateCanvas();
    }
  }

  componentDidUpdate() {
    this.updateCanvas();
  }

  updateCanvas() {
    const { canvas } = this;
    const context = canvas.getContext('2d');
    this.props.updateCanvas(context);
  }

  render() {
    return <canvas ref={(e) => { this.canvas = e; }} width={this.props.width} height={this.props.height}></canvas>;
  }
}

import React, { Component } from 'react';
import Canvas from './Canvas';

const CANVAS_WIDTH = 500;
const CANVAS_HEIGHT = 500;

export default class Parent extends Component {
  render() {
    const canvasProps = {
      width: CANVAS_WIDTH,
      height: CANVAS_HEIGHT,
      updateCanvas: (context) => {
        //このメソッドを子（Child, Child2）にそれぞれ使ってほしい
      },
    };
    return (
      <div>
        <CanvasComponent {...canvasProps} />
      </div>
    );
  }
}

上記に対して、子コンポーネントを実装したいですが、propsでupdateCanvasを渡してもcontextがうまく取れなかったり、そもそも親にcanvasがいるのでうまく動かないと思います。
子コンポーネントそれぞれがcanvasを持つべきでしょうか…。
アドバイスをいただけると嬉しいです。

Answer 1

直接的な回答ではないですが、

react-konvaなどのライブラリを利用してみては？