リアブートストラップポップオーバー：私が期待する場所に配置されていません

Question

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

EDIT：問題は私のLoginコンポーネントにポップオーバーをラップしていることが表示されます。私がPopoverをHeaderLoginComponentの中にconstとして定義すると、それ自体がうまく位置付けられているようです。

誰かがその理由を知っていますか？

Answer 1

Loginコンポーネント内のPopoverに小道具を渡していませんでした。したがって、Popoverは、placement、positionTop、およびpositionLeftの値を取得していないため、OverlayTriggerが送信しようとしていました。

私はここで説明したようJSXスプレッド属性を使用して一緒にすべての小道具を送信することができました：

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

Answer 2

彼はすでに小道具が欠落して言ったようにはい、ここでのコードは中のようになります方法です誰かが小道具を渡す場所がわからない場合：

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