如何访问功能组件中的DOM [重复]

Question

这个问题在这里已有答案：

• Why does jQuery or a DOM method such as getElementById not find the element? 8个答案

我在reactJS中创建了一个速度表并使用了一点vanilla语法，但是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)并检查在调用getElemenetById函数时DOM的样子。

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