在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ react中應(yīng)用canvas，存在多個canvas子組件，圖像如何渲染？

react中應(yīng)用canvas，存在多個canvas子組件，圖像如何渲染？

render() {
    return (
      <canvas id={this.state.Id} width="600" height="67"></canvas>
    );
  }

canvas需要獲取Id，如果這樣動態(tài)賦值id，componentDidMount或者componentDidUpdate中都拿不到canvas的ID，

    var canvas = document.getElementById(this.state.Id);

需求是會有多個canvas組件

clipboard.png
這種情況下，該如何繪制動畫？

回答
編輯回答
醉淸風(fēng)

react獲取dom的方式可以采用ref屬性

2018年8月2日 03:44
編輯回答
單眼皮

為什么一定要id？

componentDidUpdate(){
const $el1 = this.canvas1;
const $el2 = this.canvas2;
const $el3 = this.canvas3;
}

render(){
return(
<div>
<canvas ref={ref=>(this.canvas1 = ref)} />
<canvas ref={ref=>(this.canvas2 = ref)} />
<canvas ref={ref=>(this.canvas3 = ref)} />
</div>
)
2018年4月24日 20:34
編輯回答
朕略萌

用 ref={(e)=>this.canvas=e} (this.canvas==document.getElementById(this.state.Id))

2017年11月26日 09:19
編輯回答
陌顏
  drawCanvas = canvas => {
    if (!canvas) { return }
    // ....
  }

  render() {
    return (
      <canvas ref={drawCanvas} width="600" height="67"></canvas>
    );
  }
2017年5月27日 19:44