React - 菜单下拉动态绝对位置答案

【问题标题】：React - Menu dropdown dynamic absolute positionReact - 菜单下拉动态绝对位置
【发布时间】：2021-05-31 22:43:36
【问题描述】：

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

在我的functionComponent开头。

但它不起作用。

我明白了：

TypeError: Cannot read property 'offset' of null

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

谢谢！

【问题讨论】：

似乎 ref menuBtn.current 为空。您是否在功能组件中使用此代码？您是否尝试将 React.createRef() 更改为 React.useRef()？
@JWGeertsma 我在一个类中尝试了 createRef 并在一个函数中尝试了 useRef 但都不起作用

标签： javascript css reactjs next.js

【解决方案1】：

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

【讨论】：