Javascript 使用React时，我应该使用什么来代替document.queryselector（）？

我目前正在react的一个网站上工作，该网站将使用anime.js制作一些动画。我希望有一个选择画布元素并可以对其进行更改的代码

var canvasEl=document.querySelector（'.clickpad'）；
var ctx=canvasEl.getContext（'2d'）；
...

但是，我不确定如何在React中实现这一点。我在网上读过一些关于React.createref的文章，但我仍然不确定在这种情况下如何使用

以下是我的react组件中的HTML：

const Practice = () => (
  <div className="info">
    <TitleBar />
    <div className="box">
      <h3>Test</h3>
    </div>
    <canvas className="clickpad"></canvas>
  </div>
);

const Practice=（）=>(
试验
);

---

任何帮助都将不胜感激

对于功能组件，可以使用

useRef

钩子：

const Practice = () => {
  const canvasRef = React.useRef();
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    // use this to draw something on every redraw of the component
  });
  return (
    <div className="info">
      <TitleBar />
      <div className="box">
        <h3>Test</h3>
      </div>
      <canvas className="clickpad" ref={canvasRef}></canvas>
    </div>
  );
};

const Practice=（）=>{
const canvasRef=React.useRef（）；
React.useffect（（）=>{
const canvas=canvasRef.current；
如果（！canvas）返回；
const ctx=canvas.getContext（“2d”）；
//使用此选项在组件的每个重绘上绘制一些内容
});
返回(
试验
);
};

我们可以利用hook来实现这一点

const{useRef，useffect}=React；
const Practice=（）=>{
const canvasRef=useRef（）；
useffect（（）=>{
如果（canvasRef.current）{
console.log（canvasRef.current）；
//您可以使用canvasRef.current访问画布`
canvasRef.current.getContext（'2d'）；
}
}, []);
返回(
{/*  */}
试验
)
};
render（，document.getElementById（“react”）
因为您使用的是功能组件，所以您可以使用：

import React，{useRef，useffect}来自“React”
const Practice=（）=>{
const canvasElement=useRef（null）
useffect（（）=>{
const ctx=canvasElement.current.getContext（'2d'）
//其他功能
}，[canvasElement]）
返回(
试验

请确保在使用
ref
时使用
.current
，这样您指的是DOM元素本身。您还可以在具有相关依赖项数组的useEffect挂钩中调用与DOM相关的函数，以便它仅在最相关的时候运行