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

Posted 2023-02-22

【中文标题】反应波普尔。如何移动元素相对父级？

【英文标题】：React Popper. How to move element relatively parent?

【发布时间】：2019-06-08 22:59:45

【问题描述】：

我正在尝试移动父组件内的 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>
)

【参考方案1】：

刚刚处理了这个：Place MaterialUI Tooltip "on top" of anchor element? (React)

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

【参考方案2】：

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

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