反应引导程序 我在检查用户电子邮件是否经过验证时无法显示警报

Question

我正在努力做到这一点，这样当我检查用户是否验证了他们的电子邮件时，会出现一个提醒，要求验证您的电子邮件。我不喜欢常规弹出警报，所以我使用React引导程序警报来显示这样的内容：

您尚未验证您的电子邮件！

我的控制台正确记录用户是否登录以及帐户是否经过验证，但我无法显示警报。我不应该使notVerifiedAlert常量吗？我试过直接退货，但没有什么区别。我不确定出了什么问题，因为我是新手，还没有完全理解所有的概念，所以任何帮助都将是惊人的。

import React, { Component } from 'react';
import firebase from 'firebase';
import { Alert } from 'react-bootstrap';
class CheckVerification extends React.Component {
render() {
const notVerifiedAlert = (
<Alert bsStyle="danger">
<h4>Almost there...</h4>
You have yet to verify your email!{' '}
<strong>
{' '}
To access the survey it is required that you verify your email.
</strong>{' '}
Upon sign up an email was sent you. However, if you need a new
verification sent to you click here. Once you verify your email, this
alert will go away.
</Alert>
);
return  (
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log('This user is logged in.');
if (!firebase.auth().currentUser.emailVerified) {
notVerifiedAlert;
console.log('This user is not verified');
} else {
console.log('This user is verified');
}
} else {
console.log('This user is not logged in');
}
})
);
}
}
export default CheckVerification;

更新：我找到了一个解决方案

Answer 1

我重新思考了我的想法并重写了它，这样如果你的电子邮件没有得到验证，就不会显示特定的页面。它并不完美，但它有效！：(

function sendLink(){
firebase.auth().currentUser.sendEmailVerification()
alert("A verification email has been sent. Please go to your inbox now to verify you email. Refresh the page when complete.");
}
var fullID = '';
class SurveyPage extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
//if email not verified, dont show iframe
render() {
if(!firebase.auth().currentUser.emailVerified){
return(
<div className="alert alert-danger">
<h5><strong>You must verify your email before viewing the survey.</strong></h5>
<a onClick={sendLink}> <u> Click here to send another verification email. </u> </a>
<br/>
<small> This alert will go away once your email is verified.</small>
</div>
)
}
else{
fullID =  "https://airtable.com/embed/" + surveyID + "?backgroundColor=tealLight";
console.log("Full survey URL: " + fullID);
return (
<div id = "content" >
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js" />
<IframeComponent
class="airtable-embed airtable-dynamic-height"
src= {fullID}
/>
</div>
);
}
}
}