文章/答案/技术大牛

发布

社区首页 >问答首页 >React.js --功能组件-- DOM操作，更改元素的样式

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

Stack Overflow用户

提问于 2020-10-18 12:55:34

回答 1查看 580关注 0票数 1

我正在尝试使用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代码)

dom-manipulation

use-ref

reactjs

transform

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-18 13:20:32

不要将传统的命令式DOM操作和React混为一谈，除非您非常熟悉React的工作原理。使用声明性操作。在React中，您将有一些状态(比如旋转)，您的事件处理程序将更新您的状态，然后render将检测到这一点，并自动重新呈现依赖于该状态的受影响组件。在这里，你需要为每个气泡提供一个参考，以得到补偿。在“反应”中，您通常只需将它们抽象为它们自己的组件：

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>
);

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64413573

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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