用 useRef 移动一个反应 <div>

Posted 2023-02-25

【中文标题】用 useRef 移动一个反应 <div>

【英文标题】：moving a react <div> with useRef

【发布时间】：2021-02-08 10:43:21

【问题描述】：

我是 React 的初学者，只是想通过重新创建一个老式的游戏类型来获得乐趣：“太空入侵者”。 T 认为这对于像我这样的初学者来说是一个很好的简单练习。

我需要控制屏幕底部的一个 div，它是向上方的外星人发射激光束的宇宙飞船！

我无法使用useRef() 作为玩弄 div 位置的方法。 我的意思是我正在尝试访问与 div 关联的样式类的“左”或“右”属性。

奇怪的是我可以改变背景颜色，或者我可以改变宽度，但我不能访问'left'或'right'属性来让它移动。

这是我卑微的尝试：

https://codesandbox.io/s/condescending-bose-ehn4f?file=/src/index.js

【问题讨论】：

当用户按下左键盘或右键盘时，您是否试图让键盘移动？

是的！但现在我只是一步一步，在那之后我会设置运动或其他东西......:)

【参考方案1】：

问题出在 CSS 上。如果要使用左右属性，则需要将位置属性设置为：绝对、相对或固定。如果你把它们放进去，你就可以做到。

当你使用绝对位置时，容器应该具有相对位置，并且left、top、right和bottom属性将出现在具有相对位置的元素的上下文中。

如果您使用相对位置，左、右、下、上将相对于它应该是的位置

如果您使用固定，属性将相对于整个页面，即使您滚动元素也会保留在那里。据我所知，这将是最有用的解决方案