如何在React

Question

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

的方法

背景： 我有一个显示firebaseUI登录屏幕的React组件，我通过将prop从子组件传递到子组件来跟踪登录。此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

在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>
    );
  }
}