如何在功能组件中访问DOM

Question

我在 reactJS 中创建了一个速度计并使用了一些普通的语法，但是画布返回了 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

问题是，您试图在元素出现在 DOM 中之前访问该元素（尝试console.log(document.body.innerHTML)在 React 导入的正下方并检查调用该函数时 DOM 的样子getElemenetById。

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