如何使用 React 钩子或其他方式(React/Next js)使组件(弹出模式)只出现一次

Question

我想让每次访问只出现一次弹出模式(我不希望每次有人返回索引页面时它都出现(。有没有办法使用钩子来做到这一点，或者有更好的方法吗？

export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
{/* <div className={styles.popupInner}> */}
<div className={styles.popupInner}>
<div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
</div>    
{/* </div> */}
</div>
)
}

Answer 1

你可以用localstorage和useEffect钩

子为什么选择本地存储？

您可以使用useContext钩子获得相同的结果。但在刷新时。钩子不保留前一个 value.so 更好地使用localstorage来存储弹出状态

export default function Popup() {
const [visible, setVisible] = React.useState(false);
useEffect(()=>{
let pop_status = localStorage.getItem('pop_status');
if(!pop_status){
setVisible(true);
localStorage.setItem('pop_status',1);
}
},[])
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
{/* <div className={styles.popupInner}> */}
<div className={styles.popupInner}>
<div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
</div>    
{/* </div> */}
</div>
)
}

Answer 2

export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup}>
<button onClick={() => setVisible(false)}>Click</button>
{ visible ? <div className={styles.popupInner}> 
<div className={styles.popupInner}>
<div className={styles.buttonContainer}>
<Button color="danger" className={styles.button}>Okay</Button>
</div>
</div>    
</div> : "" }
</div>
)
}