我正在嘗試使用 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"/>
  )
}