modal popup（ReactJS）でfirebaseui認証を使用しますか？

Question

firebaseuiで自分のサイトにログインできるようにしようとしています。ログインフォームを表示するにはfirebaseui_auth_containerが必要ですが、起動時にモーダルポップアップになっているので、そのdivはありません。これは私のコードです：

constructor() { 
... 
// Initialize the FirebaseUI Widget using Firebase. 
    var ui = new firebaseui.auth.AuthUI(Firebase.auth()); 
    var uiConfig = { 
     'signInSuccessUrl': 'url.com', 
     'signInOptions': [ 
     // Leave the lines as is for the providers you want to offer your users. 
     Firebase.auth.GoogleAuthProvider.PROVIDER_ID, 
     Firebase.auth.FacebookAuthProvider.PROVIDER_ID, 
     Firebase.auth.TwitterAuthProvider.PROVIDER_ID, 
     Firebase.auth.GithubAuthProvider.PROVIDER_ID, 
     //Firebase.auth.EmailAuthProvider.PROVIDER_ID 
     ], 
     'signInFlow': 'popup' 
    }; 
    ui.start('#firebaseui-auth-container', uiConfig) 
} 

render() { 
    <div className="my-logo"><button style={{backgroundColor: 'transparent', border: '0px', 
     font: "inherit", color: "#eee", cursor:"pointer"}} 
       onClick={this.openLogin.bind(this)}>Login</button><br/></div> 
       <Modal 
        aria-labelledby='modal-label' 
        style={modalStyle} 
        backdropStyle={backdropStyle} 
        show={this.state.showLoginModal} 
        onHide={this.closeLogin.bind(this)} 
       > 
        <div id="firebaseui-auth-container" style={dialogStyle()} /> 
       </Modal> 
} 

適切なIDを持つdivは、私のヘッダーの「ログイン」ボタンをクリックした後にのみ存在します。今すぐクリックすると、空のモーダルボックスが表示されます。 firebaseuiがdivになるのを待つか、起動時にdivを 'exist'にする方法がありますか？firebaseuiが不平を言うことはありませんか？ （今、明らかに、ウィジェットが見つからないというエラーが表示されます）。

Answer 1

コンストラクタの代わりにcomponentDidMount()メソッドでfirebaseuiを初期化してください render関数にreturn文がありません。見逃した場合は以下のように変更してください：

render(){ 
    return (
    <div> 
    ... contents here 
    </div> 
) 
}