Reactjs 定位自举popover

我有两排引导程序。当用户单击任何行时，PopOver应该出现在行的中间，并显示一些信息。然而，在这一刻，它突然出现在最右边，在这一行结束之后

下面是我的JSBin链接，显示代码：

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

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

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

但这也不起作用

有没有办法按照我的要求渲染popover覆盖

（包括此处的所有代码供参考，但JSBin链接正在工作）

编辑：下面是它现在的样子：

---

以下是我希望它看起来的样子：

很难看到您试图做什么，但您不应该使用positionLeft和positionTop道具，它们将由叠加组件设置

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

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

如果希望弹出出现在中间，请使用<代码>放置> /COD> PROP和值>代码>“顶部”<代码>或>代码>“底部”<代码>，而不是<代码>“右”< /代码>

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

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

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

MyPopover类扩展了React.Component{ render（）{ var left=calculateMyOwnLeftPosition（） 返回( {this.props.children} ) } } 然后你会像这样使用它：

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

甜蜜的内容

使用Popover道具positionLeft和positionTop：

<Popover
  id="popover-basic"
  placement="right"
  positionLeft={200}
  positionTop={50}
  title="Popover right"
>

但是，如果您使用的是OverlyTrigger，请在OverlyTrigger上使用placement：

反应引导：

const popoverTop=(
神圣的鳄梨酱！检查此信息。
);
神圣的鳄梨酱！

很抱歉没有说清楚。基本上，我想让POPOFE与当前渲染完全一样，除了右边的右边，我希望它在行的中间渲染。我使用了API中提供的positionLeft。请检查我的编辑以查看当前和所需的输出。