popper.js - 反应波普尔。如何移动元素相对父级？

Question

我正在尝试移动父组件内部的 Popper。我该怎么做？

我尝试在修饰符对象中使用偏移属性。例如：

offset: {
  offset: 20,
}

但是 offset 只会将 Popper 朝一个方向移动。如果展示位置={'top' || 'bottom'} => 如果placement={'right' || 它会左右移动 'left'} => 它上下移动。

const Layer = ({
  children,
  align,
  inner = true,
  parent,
  portal,
}) => (
  <Manager>
    <Popper
      placement={align}
      modifiers={{
        inner: {
          enabled: inner,
        },
      }}
      referenceElement={parent}
    >
      {({ ref, style, placement }) => (
        <div
          ref={ref}
          data-placement={placement}
          style={style}
        >
          {console.log(style)}
          {children}
        </div>
      )}
    </Popper>
  </Manager>
)

Answer 1

刚刚解决了这个问题：将 MaterialUI Tooltip 放置在锚元素的“顶部”？（反应）

PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      offset: {
        enabled: true,
        offset: '20px 20px'
      }
    }
  }
}}

Answer 2

我就这样解决了。向 popper child添加topOffset和leftOffsetprops 并使用传播语法。不要认为这是最干净的解决方案。

const Layer = ({
  children,
  align,
  inner = true,
  parent,
  portal,
  topOffset,
  leftOffset,
}) => (
  <Manager>
    <Popper
      placement={align}
      modifiers={{
        inner: {
          enabled: inner,
        },
      }}
      referenceElement={parent}
    >
      {({ ref, style, placement }) => (
        <div
          ref={ref}
          data-placement={placement}
          style={{
            ...style,
            top: style.top + topOffset,
            left: style.left  + leftOffset,
          }}
        >
          {console.log(style)}
          {children}
        </div>
      )}
    </Popper>
  </Manager>
)