使用 useRef 移动一个 React <div>
moving a react <div> with useRef
我是 React 的初学者，我只是想从重新创建一种老式游戏中获得乐趣：'space invader'。我认为对于像我这样的初学者来说，这将是一个很好的简单练习。
我需要控制屏幕下方的一个div，就是飞船，会向上面的外星人发射激光束！
我无法利用 useRef() 来调整 div 的位置。
我的意思是我正在尝试访问与 div 关联的样式 class 的 'left' 或 'right' 属性。
奇怪的是，我可以更改背景颜色，例如，我可以更改宽度，但我无法访问 'left' 或 'right' 属性来使其移动。
这是我拙劣的尝试：
https://codesandbox.io/s/condescending-bose-ehn4f?file=/src/index.js
问题出在 css。如果你想使用 left 和 right 属性，你需要将 position 属性 设置为：absolute、relative 或 fixed。如果你把它们放在一起，你就能做到。
当您使用绝对位置时，容器应具有相对位置，并且 left、top、right 和 bottom 属性将出现在具有相对位置的元素的上下文中。
如果你使用相对位置，左、右、下、上将相对于它应该的位置
如果你使用 fixed，属性将相对于整个页面，即使你滚动，元素也会保留在那里。据我所知，这将是最有用的解决方案
我是 React 的初学者，我只是想从重新创建一种老式游戏中获得乐趣：'space invader'。我认为对于像我这样的初学者来说，这将是一个很好的简单练习。
我需要控制屏幕下方的一个div，就是飞船，会向上面的外星人发射激光束！
我无法利用 useRef() 来调整 div 的位置。
我的意思是我正在尝试访问与 div 关联的样式 class 的 'left' 或 'right' 属性。
奇怪的是，我可以更改背景颜色，例如，我可以更改宽度，但我无法访问 'left' 或 'right' 属性来使其移动。
这是我拙劣的尝试：
https://codesandbox.io/s/condescending-bose-ehn4f?file=/src/index.js
问题出在 css。如果你想使用 left 和 right 属性，你需要将 position 属性 设置为：absolute、relative 或 fixed。如果你把它们放在一起，你就能做到。
当您使用绝对位置时，容器应具有相对位置，并且 left、top、right 和 bottom 属性将出现在具有相对位置的元素的上下文中。
如果你使用相对位置，左、右、下、上将相对于它应该的位置
如果你使用 fixed，属性将相对于整个页面，即使你滚动，元素也会保留在那里。据我所知，这将是最有用的解决方案