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

Question

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

我想要的内容显示在此 codepen 链接中：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 代码）

Answer 1

不要将传统的命令式 DOM 操作和 React 混为一谈，除非您真的完全熟悉 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>
);