react dom 操作和事件处理程序问题

Question

有关如何将此 js 代码转换为 React 的任何提示...

document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  let x = e.pageX;
  x -= document.querySelector('.container').getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
  
});


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.querySelector('.container').offsetWidth)));
  if (active==="container-mid"){
    document.querySelector('.container-mid').style.width = transform+"px";
    scrolMid.style.left = transform-25+"px";
    if (scrolTip.getBoundingClientRect().left>scrolMid.getBoundingClientRect().left-5){
      document.querySelector('.mainTop').style.width = transform-5+"px";
      scrolTip.style.left = transform-30+"px";
    }
  }}
return (

<div className="container">
  <div className="container-mid">...</div>
    <div className=scrolMid>......</div>
    <div className="maintip">
    <div className=scrolMid>......</div>
  </div>
)

但是，我尝试使用必要的反应钩子（useRef、反应事件处理程序）来转换上面的代码。但是当调用onMouseMove事件时，后面的scrollmove函数未能触发，如下面的代码所示

const containerRef = useRef(null);
const ytu = () => {
   if (!active) return;
  let x = e.pageX;
  x -= document.containerRef.getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
}

return (
<div className="container"
ref={containerRef}
onMouseMove={ytu}
>
)

还有这个

const container-midRef = useRef(null);
const scrolMidRef-midRef = useRef(null);
const scrolTipRef = useRef(null);
const mainTopRef = useRef(null);


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.containerRef.offsetWidth)));
  if (active==="container-midRef"){
    document.container-midRef.style.width = transform+"px";
    scrolMidRef.style.left = transform-25+"px";
    if (scrolTipRef.getBoundingClientRect().left>scrolMidRef.getBoundingClientRect().left-5){
      document.mainTopRef.style.width = transform-5+"px";
      scrolTipRef.style.left = transform-30+"px";
    }
  }}

scrollMove(x)函数没有被触发。也许我有一个错误。

Answer 1

1. 保持驼峰命名惯例
2. 当使用 ref 常量访问时，它的值是

   yourRef.current

const containerMidRef = useRef(null);
const scrolMidRef = useRef(null);
const scrolTipRef = useRef(null);
const mainTopRef = useRef(null);


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x, containerRef.current.offsetWidth)));
  if (active==="container-midRef"){
    containerMidRef.current.style.width = transform+"px";
    scrolMidRef.current.style.left = transform-25+"px";
    if (scrolTipRef.current.getBoundingClientRect().left>scrolMidRef.current.getBoundingClientRect().left-5){
      mainTopRef.style.width = transform-5+"px";
      scrolTipRef.style.left = transform-30+"px";
    }
  }}