Question

我想获得一个canvas元素，在react.render（）中定义，我尝试使用ref而不是id，但我总是得到一个NULL元素。我在这做错了什么？ document.getElementById（'canvas1'）似乎也不起作用，这就是我尝试this.refs.refName的原因，但没有成功。

import React from 'react'
import ReactDOM from 'react-dom'
import './../css/index.css'


class App extends React.Component {


   constructor(props){
      super(props)      
      this.SetImage();

      window.a = this.state
   }


   SetImage() {
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    var canvas = this.refs.cavas1; //Gives always a NULL element
    var ctx = canvas.getContext('2d');
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      img.style.display = 'none';
    };
    var color = this.refs.color1;//document.getElementById('color');
    function pick(event) {
      var x = event.layerX;
      var y = event.layerY;
      var pixel = ctx.getImageData(x, y, 1, 1);
      var data = pixel.data;
      var rgba = 'rgba(' + data[0] + ', ' + data[1] +
                 ', ' + data[2] + ', ' + (data[3] / 255) + ')';
      color.style.background =  rgba;
      color.textContent = rgba;
    }
    canvas.addEventListener('mousemove', pick);
   }


   render(){
      return (
         <div className="main-container">
            <h1>Hello World!</h1>

            <canvas id="canvas1" ref="canvas1" width="100" height="100" styles="float:left"></canvas>
            <div id="color1" ref="color1" styles="width:200px;height:50px;float:left"></div>
         </div>
      )
   }
}

ReactDOM.render(
   <App />,
   document.querySelector('#root')
)

Answer 1

问题是因为你试图从构造函数引用canvas：

  this.SetImage();

此时尚未运行渲染方法，因此画布不在那里。放置代码以在componentDidMount中处理画布。

此外，我认为您使用的参考API有点陈旧，使用更现代的approach。

Canvas获取ref元素

1 个答案: