React.js-功能组件-DOM操作，更改元素的样式

问题描述

我正在尝试使用React.js中的功能组件来操作DOM。当我将浮动方块悬停在其上方时，我希望它们旋转一定程度的角度，然后尝试在handleCursor函数中操纵DOM中的元素。样式说它在console.logs右边更新，所以我不确定为什么实际的正方形本身不旋转。

此代码笔链接中显示了我想要的内容：https://codepen.io/rauldronca/pen/MZjEBd

这是一些JS代码

import React,{useEffect,useRef} from 'react';
import '../css/home.css';

const Home = () => {
    // const bubbleRef = useRef(null);

    // useEffect(() => {
    //     if(bubbleRef.current) {
    //         bubbleRef.current.style.transform = 'translateX(200px)';
    //     }
    //     console.log(bubbleRef.current);
    // },[bubbleRef])

    const handleCursor = (e) => {   
        const bubbles = document.querySelectorAll('.bub');
            
        const mouseX = e.pageX;
        const mouseY = e.pageY;
        
        bubbles.forEach(bubble => {
            const bubbleX = bubble.offsetLeft + 20;
            const bubbleY = bubble.offsetTop + 20;
    
            const diffX = mouseX - bubbleX;
            const diffY = mouseY - bubbleY;
            
            const radians = Math.atan2(diffY,diffX);
                    
            const angle = radians * 180 / Math.PI;
            
            bubble.style.transform = `rotate(${angle}deg)`;
            console.log(bubble);
        })
    }

    return (
        <div className='bubbleContainer'>
            <div className='bub1 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub2 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub3 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub4 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub5 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub6 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub7 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub8 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub9 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub10 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub11 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub12 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub13 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub14 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub15 bub' onMouseMove={e => handleCursor(e)}></div>
            <div className='bub16 bub' onMouseMove={e => handleCursor}></div>
        </div>
    )
}

export default Home;

此外，我也尝试使用useRef钩子，但是它的作用与我的handleCursor函数相同。正方形仍然不会旋转（我已注释掉useRefs代码）

解决方法

除非您真的非常了解React的工作方式，否则不要将传统的命令式DOM操作与React混合使用。使用声明性操作。在React中，您将具有某种状态（如旋转），事件处理程序将更新您的状态，然后React将检测到此状态并自动重新呈现依赖于该状态的受影响组件。您需要为每个气泡提供一个参考，以获取偏移量。在React中，通常只需将它们抽象为自己的组件即可：

const Bubble = () => {
  const bubbleRef = useRef();
  const [rotation,setRotation] = useState(0);
  const calcAngle = (x,y) => {
    // Math goes here. You can use bubbleRef.current.whatever
    // to get the properties of the underlying DOM element.
    // You could make this a pure function and pull it out of
    // the component at the cost of adding more parameters,// I would but your call.
  };
  const handleMove = (evt) => {
    // Assuming you pull the relevant maths into
    // a separate function
    setRotation(calcAngle(evt.pageX,evt.pageY));
  };

  // NOTE: use className,not class in React
  return (
    <div
      className="bub"
      onMouseMove={handleMove}
      ref={bubbleRef}
      style={{
        transform: `rotate(${rotation}deg)`,}}>
    </div>
  );
};

现在您的原始组件看起来像这样：

const Bubbles = () => (
  <div className="bubbleContainer">
    <Bubble />
    <Bubble />
    <Bubble />
  </div>
);