React Material-UI Popper - popper ref 不起作用

Question

我正在嘗試實現當彈出器打開並且底部超過 window 底部時，它的位置將發生變化（從“右端”到“右端”）的行為。

我想從 ref 得到底部 position，看看它是否通過了底部。 問題是，我嘗試過的 ref.current 是 null。

這些是我到目前為止嘗試過的：

1. 將 ref object 傳遞給 Popper 組件道具 ref 和 popperRef。 on useEffect電流出來null。
2. 將 ref object 傳遞給 popper 包裝的 div。 同樣，在 useEffect 上，當前屬性為 null。
3. 將回調傳遞給 popper ref/popperRef-props，以及它包裝的 div。 掛載時不會調用 ref 回調。

• 我確實注意到 useEffect 在屏幕上顯示 popper 之前執行。

Popper 組件 - 將回調傳遞給 ref 到包裝的 div 的示例

const customPopper = ({
 popperRef = (popperElement) => {}
}) => {
  const useStyles = makeStyles({
    Popper: { ...popperStyle, ['z-index']: '9999' }
  })
  const styles = useStyles();

  return (
    <Popper
      className={styles.Popper}
      placement={placement}
      open={open}
      anchorEl={anchorEl}
    >
      <ClickAwayListener onClickAway={handleClickAway}>

        <div ref={popperRef}>

          <CalendarPopover
            className={st(classes[calendarPopoverClass], { isMobile })}
            isShown
            withArrow={false}
            title={title}
            onClose={handleCloseClick}
          >
            {children}
          </CalendarPopover>
        </div>
      </ClickAwayListener>
    </Popper >
  )

父組件引用處理程序

 const popperRefHandler = (popperRef: React.MutableRefObject<HTMLDivElement>) => {
    const popperBottom = popperRef.current.getBoundingClientRect().bottom;
    console.log('hello from popper mount in agenda cell, popper-bottom: ', popperBottom);

  }

編輯 1 - 沙箱示例

https://codesandbox.io/s/material-ui-issue-forked-zy11e?file=/src/index.js

Answer 1

它在傳遞回調時起作用。 它傳遞的參數是 DOM 元素並且沒有 RefObject 中的當前屬性：

活生生的例子

非常感謝 Material UI 團隊的幫助： https://github.com/mui-org/material-ui/issues/23484