Question

为什么无法在 React JSX <canvas> 对象上调用 getContext 函数？

2020-01-22

2007

javascript html reactjs jsx

我在 React.Component 子类中有以下代码

class SearchObject extends React.Component { 

    constructor(props) {
        super(props)

        var activateCanvas = <canvas></canvas>

        var activateDraw = () => {
            let ctx = activateCanvas.getContext('2d')
            //draw stuff
        }

        activateDraw()

        this.state = {
            activate: activateCanvas
        }
    }
...

activateCanvas.getContext('2d') 行返回错误，称 getContext 不是函数。我想知道为什么这里的 activateCanvas 不是 Element 对象。我是否必须等到元素呈现后再调用 document.getElementById() 之类的东西才能使用 getContext()？谢谢

Answer 1

是的，您需要先渲染您创建的 React 元素。只有这样您才能开始引用其 DOM 元素。我建议为此使用 ref 。类似这样的代码应该有效：

function App() {

  let ctx;
  var activateDraw = (ref) => {
    console.log('this is the canvas DOM element you want', ref)
    ctx = ref.getContext('2d')
    // draw stuff
  }
  var activateCanvas = (<canvas ref={(e) => activateDraw(e)}></canvas>)

  return (
    <div className="App">
      { activateCanvas /* don't forget to put the element into your render */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
         ....

Answer 2

JSX 实际上并不返回 HTMLElement ，而是返回一个渲染函数，因此您基本上是在尝试执行以下操作：

const canvas = function(props, createElement) { /* render canvas*/}; // forgot the ordering of renderFn args... sue me
canvas.getContext('2d');

就我个人而言，我将 JSX 与 Vue 一起使用，在 Vue 的情况下，如果您想做这样的事情，简短的回答是肯定的，您必须等到它被渲染，然后使用 DOM 来访问由 JSX 渲染函数创建的 HTMLElement 。

希望具有 React 专业知识的人可以确认情况确实如此，或者根据您的特定 React 用例提供更精确的答案。