定位react-bootstrap弹出窗口

Question

我有几个引导行。当用户单击任何行时，该行的中间应出现一个弹出窗口并显示一些信息。然而，目前它在行尾之后弹出到最右侧。

这是我的 JSBin 链接，显示了代码：https://jsbin.com/rogeyufuku/1/edit ?css,js,output

我尝试通过将positionLeft设置为负值来重新定位它，如下所示：

<ReactBootstrap.Popover className="my-popover"
                    positionLeft={-300}
                    positionTop={20}
  >

但这没有用。

我还尝试使用简单的旧 CSS 规则来操作它，如下所示：

.my-popover {
  position: relative;
  left: -200px; 
}

但这也不起作用。

有什么想法可以按照我的需要渲染弹出窗口覆盖吗？

（包括此处的所有代码供参考，但 JSBin 链接有效）

编辑：这是它现在的样子：https://i.stack.imgur.com/4XeBU.png 这是我想要的样子：https://i.stack.imgur.com/VZaHX.jpg

Answer 1

很难看出你想要做什么，但你不应该使用positionLeft和positionTop属性，它们将由Overlay组件设置

如果您希望弹出窗口出现在中间，请使用placementprop 和 values "top"，或者"bottom"代替"right"

如果您想要更细粒度地控制它的定位位置和方式，您将需要制作自己的自定义 Popover 组件，该组件对由 Overlay 组件传递给它的positionLeft 和positionTop 组件执行某些操作

class MyPopover extends React.Component {
  render(){
    var left = calculateMyOwnLeftPosition()

    return (
      <ReactBootstrap.Popover {...this.props} positionLeft={left}>
        { this.props.children }
      </ReactBootstrap.Popover>
    )
  }
}

然后你会像这样使用它：

<Overlay>
  <MyPopover>sweet content</MyPopover>
</Overlay>