时间戳

首页 > 解决方案 > 如何在功能组件中访问 DOM

javascript - 如何在功能组件中访问 DOM

问题描述

我正在 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;

标签： javascriptreactjs

解决方案

您正在尝试获取尚未呈现的节点。

在尝试获取画布之前，您可以componentDidMount通过将组件转换为有状态（类组件）的组件来使用生命周期方法。但请记住，这被认为是非常糟糕的做法，并且永远没有必要：

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

另一种解决方案将暗示使用refs，如另一个答案中链接的那样，这也被认为是一种不好的做法。

推荐阅读