React - 菜单下拉动态绝对 position

Question

我是 React 新手，我正在尝试将我的旧网站 vanillaJS 翻译成 ReactJS。

我有一个按钮应该触发下拉菜单打开。

<button 
   type="button" 
   onClick={() => setMenuOpen(!isMenuOpen)} 
   ref={menuBtn}>menu</button>

在 DOM 树的下方，我有：

{
isMenuOpen ?
  <nav style={{
     top: menuBtn.current.offset().top + menuBtn.current.outerHeight(),
     left: menuBtn.current.offset().left + (menuBtn.current.outerWidth() / 2)
  }}>
    ...
  </nav>
: null
            }

和

const [isMenuOpen, setMenuOpen] = useState(false)
let menuBtn = React.createRef()

在我的function Component的开头。

但它不起作用。

我得到：

TypeError: Cannot read property 'offset' of null

另外，我认为即使这有效，它也不会响应。 如果用户单击按钮，然后调整 window 的大小，它将不会跟随按钮所在的位置。

谢谢 ！

Answer 1

答案是使用.current.getBoundingClientRect()而不是.current.offset()