反应材料-UI Popper - popper ref不起作用

Question

我试图实现这样的行为，当打开的时候，它的底部超过了窗口的底部，它的位置将会改变(从‘右’到‘右’)。

我想从裁判那里得到底位，看看它是否通过了底部。问题是，无论我尝试什么，ref.current都是空的。

到目前为止，我尝试了以下几点：

1. 将ref对象传递给Popper组件，支持ref和popperRef。在useEffect上，电流为零。
2. 将ref对象传递给div -- popper包装。同样，在useEffect上，当前属性为空。
3. 将回调传递给popper ref/popperRef-props，并传递给其包装的div。ref回调在挂载时不会被调用。

• 我确实注意到，useEffect是在弹出器显示在屏幕上之前执行的。

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中那样具有当前属性：

实例化

材料用户界面团队的大任务，用于帮助：https://github.com/mui-org/material-ui/issues/23484