React.js -- 功能组件 -- DOM 操作,改变元素的样式
React.js -- Functional Components -- DOM manipulation, change the style of elements
我正在尝试使用 React.js 中的功能组件来操纵 DOM。当我将鼠标悬停在它们上方时,我希望浮动方块旋转一定的度数,并且我尝试在我的 handleCursor 函数中操作 DOM 中的元素。样式表示它正在右侧 console.logs 处更新,所以我不确定为什么实际的正方形本身不进行旋转。
我想要的在这个codepen里显示了link: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 操作与 React 混用,除非您真的 非常熟悉 React 的工作原理。使用声明性操作。在 React 中,您将拥有一些状态(如旋转),并且您的事件处理程序将更新您的状态,然后 React 将检测到这一点并自动 re-render 依赖该状态的受影响组件。您将需要为此处的每个气泡提供参考以获取偏移量。在 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>
);
我正在尝试使用 React.js 中的功能组件来操纵 DOM。当我将鼠标悬停在它们上方时,我希望浮动方块旋转一定的度数,并且我尝试在我的 handleCursor 函数中操作 DOM 中的元素。样式表示它正在右侧 console.logs 处更新,所以我不确定为什么实际的正方形本身不进行旋转。
我想要的在这个codepen里显示了link: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 操作与 React 混用,除非您真的 非常熟悉 React 的工作原理。使用声明性操作。在 React 中,您将拥有一些状态(如旋转),并且您的事件处理程序将更新您的状态,然后 React 将检测到这一点并自动 re-render 依赖该状态的受影响组件。您将需要为此处的每个气泡提供参考以获取偏移量。在 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>
);