我正在尝试使用 getElementsByClassName 来 select 一个 canvas 元素，但我能得到的只是一个元素数组

Question

（在 ReactJS 中工作）

我正在尝试获得正确的 canvas dom 元素，但我只能获得一个元素数组，而且我似乎无法使用标准数组语法来返回我想要处理的特定元素。

import React, {Component} from "react";
import "./Mountaincanvas.scss"

const MountainCanvas = () => {
    const canvas = document.getElementsByClassName("mountain-canvas");
    console.log(canvas)
    console.log(canvas[0])
    return (
        <canvas className="mountain-canvas"/>
        )
    }

export default MountainCanvas;

我第一次控制台记录 canvas 变量时，我得到一个带有单个元素的 HTMLCollection

HTMLCollection[]
>0: canvas.mountain-canvas
 length: 1
 __proto__:HTMLCollection

但是，如果我尝试只获取数组的第一个元素，我会得到未定义的。 我如何 select 只是数组的第一个元素，这样我就可以做诸如获取上下文之类的事情？ 还是简单的造型？

Answer 1

如果您尝试在当前组件中获取 canvas 的句柄，请使用ref ：

const MountainCanvas = () => {
  const canvas = React.useRef();
  
  if (canvas.current) {
    // do stuff with the canvas
  }

  return (
    <canvas ref={canvas} className="mountain-canvas"/>
  )
}