Question

我正在用reactJS创建一个速度表，并使用一些普通的语法，但是canvas返回的是null。如果我运行

const canvas = document.getElementById('dial__container');

在控制台中，div会立即弹出。

这仅仅是画布尚未渲染或一些奇怪的React行为的计时问题吗？

import React from 'react';

const canvas = document.getElementById('dial__container');
const ctx = canvas.getContext('2d');
const radius = canvas.height / 2;

const Speedometer = (props: any) => {

 console.log(canvas); // null
 return (
       <div className="dial__wrapper">
          <canvas id="dial__container" width="150" height="150" />
       </div>
    );
 };

export default Speedometer;

Answer 1

您正在尝试获取尚未渲染的节点。

您可以使用componentDidMount生命周期方法，在尝试获取画布之前，将组件转换为状态有效（类组件）。但是请记住，这被认为是非常糟糕的做法，绝不应该这样做：

componentDidMount(){
    this.canvas = document.getElementById('dial__container');
}

另一种解决方案将暗示使用refs，如在其他答案中所链接的那样，这也是不好的做法。

Answer 2

问题是，您试图在元素出现在DOM中之前对其进行访问（尝试在React导入下的console.log(document.body.innerHTML)处，并在调用{时检查DOM的外观） {1}}功能。

如果需要元素的引用，则应使用ref。

如何在功能组件中访问DOM

2 个答案: