React-bootstrap Popover：未定位在我期望的位置答案

【问题标题】：React-bootstrap Popover: Not positioned where I expect itReact-bootstrap Popover：未定位在我期望的位置
【发布时间】：2016-07-27 23:43:09
【问题描述】：

我无法理解 Popover 的位置。当我将它添加到我的按钮时，我希望它出现在按钮下方，但它却出现在页面的左上角：

这是我的按钮组件的代码：

function HeaderLoginButton() {
  return (
    <div style={{ padding: "15px 0px" }}>
      <OverlayTrigger trigger="click" placement="bottom" overlay={ <Login id="headerLogin" /> }>
        <a className="login" style={ buttonStyle } onClick={ this.handleClick }>
          Log in / sign up
        </a>
      </OverlayTrigger>
    </div>
  )
}

这是包装我的弹出框的Login 组件的代码：

function Login( props ) {
  return (
    <Popover id={ props.id } title={ <LoginTitle /> }>
      <div className="form-group row">
        <input className="dontHaveAcctCheckbox" type="checkbox" />
        <label>I don't have an account, yet</label>
      </div>
      <div className="form-group row">
        <label className="col-sm-3 col-xs-3 control-label">Email: </label>
        <input type="email" className="email col-sm-8 col-xs-8" />
      </div>
      <div className="form-group row">
        <label className="col-sm-3 col-xs-3 control-label">Password: </label>
        <input type="password" className="password col-sm-8 col-xs-8" />
      </div>
      <button type="button" className="loginButton btn btn-default">
        Login
      </button>
      <button
        type="button"
        className="createAcctButton btn btn-default"
        style={{ display: "none" }}>
          Create Account
      </button>
    </Popover>
  )
}

编辑：看来问题是我将弹出框包装在 Login 组件中。如果我在 HeaderLoginComponent 中将Popover 定义为const，它似乎可以很好地定位自己。

有人知道为什么会这样吗？

【问题讨论】：

标签： reactjs popover react-bootstrap

【解决方案1】：

不确定它是否与新读者相关，但我得到了这个答案并且提供的解决方案对我不起作用，我不得不使用 React.forwardRef 作为我的自定义弹出框的包装器，并将 ref 也向下传递。所以是这样的：

const CustomPopover = React.forwardRef((props, ref) => {
  return (
    <Popover id='popover-basic' {...props} ref={ref}>
      <Popover.Title as='h3'>Popover right</Popover.Title>
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
      </Popover.Content>
    </Popover>
  );
});

【讨论】：

【解决方案2】：

我没有将道具传递给我的Login 组件中的Popover。所以Popover 没有得到OverlayTrigger 试图发送的placement、positionTop 和positionLeft 的值。

我能够使用 JSX 传播属性将所有道具一起发送，如下所述：

https://facebook.github.io/react/docs/transferring-props.html

【讨论】：

【解决方案3】：

是的，正如他已经说过缺少道具，如果有人不确定将道具传递到哪里，代码应该如下所示：

function Login( props ) {
  return (
    <Popover id={ props.id } title={ <LoginTitle /> } {...props}>
      <div className="form-group row">
        <input className="dontHaveAcctCheckbox" type="checkbox" />
        <label>I don't have an account, yet</label>
      </div>
      <div className="form-group row"
//rest of the code...

【讨论】：