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