document.createElement 在 React 的 componentDidMount 中没有按预期工作？

编程问答 2022-05-30

问题描述

我正在尝试动态创建一个画布元素，以便在完成一些绘图后执行 .toDataURL() 方法。但是 document.createElement 没有预期的行为。

当我尝试这个时：

componentDidMount() {
    var canvas = document.createElement('canvas');
    canvas.height = 100;
    canvas.width = 200;
    console.log(canvas);
}

我进入控制台：

<canvas height="0" width="0"></canvas>

但使用 componentDidUpdate 方法效果很好。

componentDidUpdate() {
    var canvas = document.createElement('canvas');
    canvas.height = 100;
    canvas.width = 200;
    console.log(canvas);
}

<canvas height="100" width="200"></canvas>

这里到底发生了什么？

请在 React 中使用 ref 或将 <canvas /> 元素应用于 DOM 的任何有关正确方法的答案都无济于事，因为我特别想了解为什么 {{ 1}} 和 componentDidMount 在 React 中。

解决方法

Ref 是在 React 中定位元素的正确方法，而在 React 中创建元素的正确方法是使用 jsx 返回它们。

这个例子展示了如何制作画布：

const App = () => {

  const drawCanvas = (ref) => {
    if (ref) {
      ref.width = 200;
      ref.height = 100;
      const ctx = ref.getContext("2d");
      ctx.clearRect(0,200,100);
      ctx.fillStyle = "grey";
      ctx.fillRect(0,100);
    }
  };

  return <canvas ref={drawCanvas}/>
};

ReactDOM.render(<App />,document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

canvascreateelementdomjavascriptreactjsreactjsreactjsreactjs