了解React中的用户挂钩-DEV365 开发者社区

React中的USEREF挂钩是访问功能组件中DOM元素的属性的一种方法。它允许您创建一个可变的对象，该对象持续存在于组件的重新渲染中。

想象您是画家，并且正在创作新画。您有一个画布和画笔，您想跟踪油漆的当前颜色以及画布上画笔的位置。为此，您可以使用useref钩子，例如调色板和油漆托盘。

这是您如何使用USEREF钩访问功能组件中DOM元素的属性的示例：

import { useRef } from "react";

function Painting() {
  const canvasRef = useRef(null);
  const paintbrushRef = useRef(null);

  function handlePaintbrushMove(event) {
    const { x, y } = event.target.getBoundingClientRect();
    paintbrushRef.current.style.top = y + "px";
    paintbrushRef.current.style.left = x + "px";
  }

  function handleColorChange(event) {
    paintbrushRef.current.style.backgroundColor = event.target.value;
  }

  return (
    <div>
      <canvas ref={canvasRef} />
      <div
        ref={paintbrushRef}
        className="paintbrush"
        onMouseMove={handlePaintbrushMove}
      />
      <input type="color" onChange={handleColorChange} />
    </div>
  );
}

在此示例中，使用USEREF挂钩来创建CanvasRef和paintbrushref对象。 REF属性用于将DOM元素分配给REF对象，并且当前属性用于访问DOM元素的属性。

HandlePaintBrushMove函数使用GetBoundingClientRect方法来获取画布上的画笔元素的位置，并使用样式属性来更新顶部和左CSS属性。 HandleColorChange函数使用输入元素的值属性来更新绘画元素的CSS属性。

我希望这有助于阐明React中的Useref钩子的概念。