Reactjs 如何在React中重置firbaseui

问题：一旦我在隐藏firebaseUI后尝试重新渲染它，它将不会重新出现，也无法找到清除

AuthUI的方法

背景：
我有一个React组件，显示firebaseUI登录屏幕，我通过将道具从传递到子组件来跟踪登录。此属性有条件地确定要渲染的JSX。现在我可以成功地呈现firebaseUI，然后登录，然后注销。但这就是它的破绽所在。注销后，组件将重新呈现
和免责声明
，但我只看到
，不再看到登录

我尝试的内容：因此我不能只是重新运行代码来重新显示它，因为
var ui=new firebaseui.auth.AuthUI（firebase.auth（））将导致一个错误，表示此AuthUI已存在。因此，我需要先使用它们的
reset（）
函数，然后才能重新运行代码，但我无法让它工作，因为我遇到了类似于
ui的错误。reset（）未定义

代码

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;

import React，{Component}来自'React'；
从“../fire”导入{fire，initApp}；
导入“../../node_modules/firebaseui/dist/firebaseui.css”；
var firebase=require（'firebase'）；
var firebaseui=require（'firebaseui'）；
类登录扩展组件{
建造师（道具）{
超级（）；
this.state={}；
}
componentDidMount（）{
this.showFirebaseUILogin（）；
}
showFirebaseUILogin（）{
//FirebaseUI配置。
变量uiConfig={
回调：{
SignInsAccess：（当前用户，凭证）=>{
//保存到状态
this.props.savetoState（'login'，true，currentUser，credential）；
返回；
}
},
签名成功问题：“/”，
签署：[
//保留要向用户提供的提供商的行。
firebase.auth.PhoneAuthProvider.PROVIDER\u ID，
//firebase.auth.GoogleAuthProvider.PROVIDER\u ID，
firebase.auth.FacebookAuthProvider.PROVIDER\u ID，
//firebase.auth.TwitterAuthProvider.PROVIDER\u ID，
//firebase.auth.GithubAuthProvider.PROVIDER\u ID，
//firebase.auth.EmailAuthProvider.PROVIDER\u ID
],
//服务条款url。
ToURL:“”，
};
//使用Firebase初始化FirebaseUI小部件。
var ui=newfirebaseui.auth.AuthUI（firebase.auth（））；
ui.start（'#firebaseui auth container'，uiConfig）；
initApp（）；
//start方法将等待DOM加载。
log（“初始化登录”）；
}
render（）{
如果（这个.道具.表演）{
返回(
{/*  */}
{/*  */}
{/*  */}
免责声明：
最终用户提供的用于身份验证的电话号码将被发送到谷歌并由谷歌存储，以改进其在谷歌服务（包括但不限于Firebase）中的垃圾邮件和滥用预防。通过登录，用户同意这些条款。

);
}
否则{
返回(
退出
);
}
}
}
导出默认登录；
在
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>
    );
  }
}

const authUi=new firebaseui.auth.authUi（firebase.auth（））；
类FirebaseUI扩展了React.Component{
componentDidMount（）{
authUi.start（'#firebaseui auth'，uiConfig）；
}
组件将卸载（）{
reset（）；
}
render（）{
返回(
);
}
}
Hi，我如你所说那样做了，但是再次出现了登录组件，但没有出现firebaseUI登录（facebook、电话等），我已经缩小了问题的范围。基本上，
componentDidMount
在我注销时重新提交组件后不会出现（它总是隐藏在那里）。因此，我需要
componentdiddupdate
，但这会导致我始终显示登录名，即使在单击“通过facebook登录”之后