React.jsでアプリを作っており、Canvasを使って要素を描画したいのですが、うまく親子のコンポーネントに分けられません。
今考えている構造は
- ParentコンポーネントでCanvasを定義
- Childコンポーネントで1つの要素を描画(丸)
- Child2コンポーネントで1つの要素を描画(三角)
といった構成です。
親コンポーネントでcanvas要素を作って、子コンポーネントごとに描画したいものを描こう…と思ったのですが、canvas要素はcanvasからcontextを作って、それに対してfillStyleなどを指定していく形なので、うまく子コンポーネントにできませんでした。
API通信の結果を使って描画するので、上記のような構成で分けたいのですが、どのようにわければいいでしょうか。
なお、現在はQiitaを参考に、下記のように書いています。
React.js
1import React, { Component } from 'react'; 2 3export default class Canvas extends Component { 4 componentDidMount() { 5 this.updateCanvas(); 6 } 7 8 componentWillReceiveProps(nextProps) { 9 if (this.props !== nextProps) { 10 this.updateCanvas(); 11 } 12 } 13 14 componentDidUpdate() { 15 this.updateCanvas(); 16 } 17 18 updateCanvas() { 19 const { canvas } = this; 20 const context = canvas.getContext('2d'); 21 this.props.updateCanvas(context); 22 } 23 24 render() { 25 return <canvas ref={(e) => { this.canvas = e; }} width={this.props.width} height={this.props.height}></canvas>; 26 } 27}
React.js
1import React, { Component } from 'react'; 2import Canvas from './Canvas'; 3 4const CANVAS_WIDTH = 500; 5const CANVAS_HEIGHT = 500; 6 7export default class Parent extends Component { 8 render() { 9 const canvasProps = { 10 width: CANVAS_WIDTH, 11 height: CANVAS_HEIGHT, 12 updateCanvas: (context) => { 13 //このメソッドを子(Child, Child2)にそれぞれ使ってほしい 14 }, 15 }; 16 return ( 17 <div> 18 <CanvasComponent {...canvasProps} /> 19 </div> 20 ); 21 } 22}
上記に対して、子コンポーネントを実装したいですが、propsでupdateCanvasを渡してもcontextがうまく取れなかったり、そもそも親にcanvasがいるのでうまく動かないと思います。
子コンポーネントそれぞれがcanvasを持つべきでしょうか…。
アドバイスをいただけると嬉しいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。