如何在React中重置firbaseui

Question

问题：一旦我试图在隐藏firebaseUI后重新渲染它，它就不会再次出现，也找不到清除AuthUI的方法

背景：我有一个React组件，它显示firebaseUI登录屏幕，我通过将道具从传递到子组件来跟踪登录。此道具有条件地确定要渲染的JSX。现在我可以成功地呈现firebaseUI，然后登录，然后注销。但这就是它断裂的地方。注销后，组件会重新呈现<div id="firebaseui-auth-container"></div>和免责声明<p>，但我只看到了<p>，再也看不到登录。

我尝试了什么：所以我不能重新运行代码来重新显示它，因为var ui = new firebaseui.auth.AuthUI(firebase.auth());会导致一个错误，说这个AuthUI已经存在。因此，在重新运行代码之前，我需要先使用他们的reset()函数，但我永远无法让它工作，因为我得到了一个类似于ui.reset() is undefined的错误。。。

代码

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

在componentDidMount外部初始化FirebaseUI，在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>
);
}
}