해제 경고를 한 번만 표시하도록 설정하는 방법

Question

사용자가 페이지에 처음 들어올 때 처음 경고를 표시하는 방법을 찾은 다음 사용자가 해당 페이지를 다시 클릭하면 경고가 더 이상 표시되지 않습니다.

나는이 웹 사이트의 코드를 사용 https://reactstrap.github.io/components/alerts/

내 코드 :

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} 

너희들이 그것을 확인하는 방법을 알고 계십니까? 제발 제안 해주세요.

감사합니다

내가 제대로 이해하면, 당신은 사용자가 사용자가 방문을 다시 다른 방법으로 페이지를 표시해야 할 때 있도록 특정 페이지를 방문한 "기억"할

Answer 1

당신은 다른 페이지

예를 사이에 플래그를 지속 localstorage의 도움을 걸릴 수 있습니다. construcor

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

에서 시작 이제 현재 브라우징 세션이 기본 설정을 유지하려는 경우가 sessionStorage을 사용할 수 있습니다

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

의 방문 플래그를 설정합니다.

당신은이 경고가 표시되지 않아야 함을 반영하고 다시 표시 할 때를 제거하는 식별자, 예를 들어 클래스의 어떤 종류를 추가 할 수 있습니다

Answer 2

(즉, 경고없이).

상태 변수 hasVisitedPageBefore (또는 무엇을 선택하든!)이 있어야합니다. 앱을 시작할 때 기본 값이 false으로 설정하십시오. 페이지를 방문하면 변수를 true으로 설정하십시오.

페이지에서 hasVisitedPageBefore이 true 또는 false인지에 따라 경고를 표시하거나 숨 깁니다.

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

세부 사항을 파악하는 데 어려움이 있으면 언제든지 문의하십시오.