如何重置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> 
    ); 
    } 
}