为什么不能在 React JSX <canvas> 对象上调用 getContext 函数？答案

【问题标题】：Why getContext function cannot be called on React JSX <canvas> object?为什么不能在 React JSX <canvas> 对象上调用 getContext 函数？
【发布时间】：2020-05-09 01:16:35
【问题描述】：

我在 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()？谢谢

【问题讨论】：

你实际上应该做的是创建一个引用，将该引用分配给画布，然后在使用时使用ref.current.getContext('2d')。

标签： javascript html reactjs jsx

【解决方案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" />
         ....

【讨论】：

【解决方案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 的特定用例量身定制的更精确的答案。

【讨论】：