如何重置firbaseui在陣營

Question

問題：有一次，我試着隱藏它後，重新呈現firebaseUI，也不會再出現，並不能找到一個方法來清除AuthUI

背景： 我有一個顯示firebaseUI登錄屏幕的React組件，並通過將prop傳遞給子組件來跟蹤登錄。此道具有條件地確定要渲染的JSX。現在我可以成功呈現firebaseUI，然後登錄，然後退出。但那就是它破裂的地方。註銷後，組件重新呈現<div id="firebaseui-auth-container"></div>和免責聲明<p>，但我只看到<p>而不是再次登錄。

我試過的：所以我不能重新運行代碼來重新顯示它，因爲var ui = new firebaseui.auth.AuthUI(firebase.auth());會導致錯誤，說AuthUI已經存在。所以，我需要能夠重新運行該代碼之前，先用自己的reset()功能，但我永遠不能得到它的工作，因爲我得到類似ui.reset() is undefined錯誤...

CODE

login.js成分：

import React, { Component } from 'react'; 
import {fire, initApp} from '../fire'; 
import '../../node_modules/firebaseui/dist/firebaseui.css'; 

var firebase = require('firebase'); 
var firebaseui = require('firebaseui'); 


class Login extends Component { 
    constructor(props){ 
     super(); 
     this.state={}; 
    } 

componentDidMount(){  
    this.showFirebaseUILogin(); 
} 

showFirebaseUILogin(){ 
    // FirebaseUI config. 
    var uiConfig = { 
     callbacks:{ 
      signInSuccess: (currentUser, credential) => { 
       //save to state 
       this.props.savetoState('login',true,currentUser,credential); 
       return; 
      } 
     }, 
     signInSuccessUrl:'/', 
     signInOptions: [ 
      // Leave the lines as is for the providers you want to offer your users. 
      firebase.auth.PhoneAuthProvider.PROVIDER_ID, 
      // 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 
     ], 
     // Terms of service url. 
     tosUrl: '', 
    }; 

    // Initialize the FirebaseUI Widget using Firebase. 
    var ui = new firebaseui.auth.AuthUI(firebase.auth()); 
    ui.start('#firebaseui-auth-container', uiConfig); 
    initApp(); 
    // The start method will wait until the DOM is loaded. 
    console.log('Initializing login'); 
} 

render(){ 
    if(this.props.show){ 
     return(
      <div> 
       {/* <div id="sign-in-status"></div> */} 
       {/* <div id="sign-in"></div> */} 
       {/* <div id="account-details"></div> */} 
       <div id="firebaseui-auth-container"></div> 
       <p className="disclaimer" style={{fontSize:'14px',color:'grey',maxWidth:'90vw',margin:'8px auto'}}><span style={{fontWeight:'bold'}}>Disclaimer: </span> 
        Phone numbers that end users provide for authentication will be sent to and stored by Google to improve their spam and abuse prevention across Google services, including but not limited to Firebase. By signing in, the user is agreeing to these terms. 
       </p> 
      </div> 
     ); 
    } 
    else{ 
     return(
      <div> 
       <button className="signOutBtn" onClick={this.props.logout}>Sign Out</button> 
      </div> 
     ); 
    } 
    } 
} 

export default Login; 

Answer 1

初始化FirebaseUI的componentDidMount外，啓動它上componentDidMount和復位它componentWillUnmount：

const authUi = new firebaseui.auth.AuthUI(firebase.auth()); 
class FirebaseUI extends React.Component { 
    componentDidMount() { 
    authUi.start('#firebaseui-auth', uiConfig); 
    } 
    componentWillUnmount() { 
    authUi.reset(); 
    } 
    render() { 
    return (
     <div id="firebaseui-auth"></div> 
    ); 
    } 
}