So legen Sie die Entlassungswarnung so fest, dass sie nur einmal angezeigt wird

Question

Ich versuche den Weg zu finden, den Warnhinweis zum ersten Mal anzuzeigen, wenn der Benutzer auf die Seite gelangt. Wenn der Benutzer dann erneut auf diese Seite klickt, wird dieser Alarm nicht mehr angezeigt.

Ich verwende den Code von dieser Website: https://reactstrap.github.io/components/alerts/

mein Code:

this.state = { 

    hasVisitedPageBefore: false, 
}; 

    visitPage() { 
this.setState({ hasVisitedPageBefore: true }); 

} 

showAlert() { 
return (
    <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}> 
    Congratulations! You have been created deck. 
    </Alert> 
); 
    } 


render 
{this.state.hasVisitedPageBefore ? null : showAlert} 

Haben Sie Jungs wissen, wie es zu überprüfen? Bitte schlage mich vor.

Danke

Answer 1

Sie könnten Hilfe von localstorage nehmen Fahnen zwischen verschiedenen Seiten

Eg bestehen bleiben. Starten Sie in construcor

constructor() { 
this.state = { 
    hasVisitedPageBefore: localStorage.get("hasVisited") || false, 
}; 
} 

nun die Begegnungsflag in

gesetzt

visitPage() { 
    localStorage.set("hasVisited", true) 
    this.setState({ hasVisitedPageBefore: true }); 
} 

Sie sessionStorage verwenden können, wenn Sie diese Vorliebe für die aktuellen Browser-Sitzung anhalten soll.

[Dies ist nur eine Idee, bitte entschuldigen Sie meine Syntax]

Answer 2

Wenn ich Sie richtig verstehe, Sie wollen „erinnern“, dass ein Benutzer eine bestimmte Seite, so dass, wenn der Benutzer besucht wieder, Sie auf eine andere Art und Weise zu zeigen, haben Sie Ihre Seite (dh besucht ohne die Warnung).

Sie müssen eine Statusvariable haben hasVisitedPageBefore (oder was auch immer Sie wählen, um es zu nennen!). Legen Sie beim Starten der App den Standardwert false fest. Wenn die Seite besucht wird, setzen Sie die Variable auf true.

Dann zeigen oder verstecken Sie auf Ihrer Seite den Alarm basierend darauf, ob hasVisitedPageBeforetrue oder false ist.

<div> 
     {hasVisitedPageBefore?null:<Alert>Message</Alert>} 
     <MyPage /> 
    </div> 

Fühlen Sie sich frei zu fragen, wenn Sie Probleme haben, die Details herauszufinden.