Reactjs 在访问时创建一个窗口

我是个新手，一直在看有关传球道具的教程。我试图在访问者访问我的网站时创建一个简单的确认窗口。该窗口在访问时自动加载，用户单击确认并继续。问题是，我无法通过函数关闭窗口并使用localStorage，因此当用户移出站点时，窗口不会一直弹出。对我做错了什么有什么建议吗

App.js

import React，{Component}来自'React'；
从“./Components/Dialog”导入对话框；
类应用程序扩展组件{
render（）{
返回(
培根同色多洛尔·阿梅特鸡腿肉馅猪圆头鸡、香肠小腿排骨烤鸭、皮卡哈猪多纳短腰肉恶魔岛、香肠火腿牛肉里脊、leberkas腊肠三尖烤鸡、皮卡哈烤肉、恶魔岛排骨烤鸭小腿里贝耶猪比尔顿肉糕、里贝耶肉排、里贝耶肉排可口可乐布丁肩肉肚腩面、安多维尔水牛肉、基尔巴萨肉饼、牛肉干、火腿、鸡腿、火鸡腿、熏牛肉、法兰克福鹿肉、猪排面、kevin porchetta burgdoggen shankle chislic嫩腰肉肩肉。
);
}
}
导出默认应用程序；

dialog.js

import React，{Component}来自'React'；
让dialogStyles={
宽度：“700px”，
高度：“300px”，
maxWidth:“100%”，
边距：“0自动”，
位置：'固定'，
左：50%，
前50%，
转换：“转换（-50%，-50%）”，
zIndex:'999'，
背景颜色：“#eee”，
填充：“10px 20px 40px”，
边界半径：“8px”，
显示：“flex”，
flexDirection:“列”
};
让boxStyle={
显示：“无”
}
让dialogCloseButtonStyles={
marginBottom：“15px”，
填充：“3px 8px”，
光标：“指针”，
边界半径：“50%”，
边界：“无”，
宽度：“30px”，
高度：“30px”，
fontWeight:'粗体'，
alignSelf:“柔性端”
};
让ackStyles={
fontWeight:'粗体'，
填充：“5px”，
宽度：“120px”，
高度：'50px'，
背景颜色：“#A6”，
光标：“指针”，
边界：“无”，
位置：'上下'，
边界半径：“5%”，
自我定位：“中心”
};
设ackForm={
自我定位：“中心”
};
类对话框扩展组件{
状态={
伊索彭：是的
} 
componentDidMount（）{
常量isOpen=sessionStorage.getItem（'isOpen'）='false'
this.setState（{isOpen}）；
}
handleChange=（e）=>{
常量输入=e.目标；
const value=input.type==“checkbox”？input.checked:input.value；
}
ackSubmit=（）=>{
const{isOpen}=this.state；
sessionStorage.setItem（'isOpen'，isOpen）；
};
render（）{
返回(
{this.props.children}


this.setState（{isOpen:false}}>ACKNOWLEDGE
);
}
}
导出默认对话框；

我认为这是因为您在

对话框的
状态中设置了
isOpen:true
，然后只检查组件安装后是否应该打开

下一步我会试试这个：

class Dialog extends Component {
    state = {
        isOpen: !localStorage["alreadyVisited"];
    }
...

感谢您的反馈，但是在修改上述代码时，我是否将true和false语句删除为null和alreadyVisited？我确实修改了代码，但是函数仍然没有通过，我很感谢您的耐心。这取决于您在localStorage中保存的值。如果您将true或false保存到“alreadyVisited”，这就是将分配给state.isOpen的值。我已经更新了dialog.js，感谢您的提示，我没有使用它，但您激发了我的思维，让我以一种新的方式思考。我使用sessionStorage而不是localStorage。更重要的是，我现在无法关闭对话框。我一整天都在为这件事主演，我被难住了。
import React, { Component } from 'react';

let dialogStyles = {
     width: '700px',
     height: '300px',
     maxWidth: '100%',
     margin: '0 auto',
     position: 'fixed',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%,-50%)',
    zIndex: '999',
    backgroundColor: '#eee',
    padding: '10px 20px 40px',
    borderRadius: '8px',
    display: 'flex',
    flexDirection: 'column'
   };

   let boxStyle ={
       display: 'none'
   }

   let dialogCloseButtonStyles = {
     marginBottom: '15px',
     padding: '3px 8px',
     cursor: 'pointer',
     borderRadius: '50%',
     border: 'none',
     width: '30px',
     height: '30px',
     fontWeight: 'bold',
     alignSelf: 'flex-end'
  };

 let ackStyles = {
     fontWeight: 'bold',
     padding: '5px',
     width: '120px',
     height:' 50px',
     backgroundColor: '#a6a6a6',
     cursor: 'pointer',
     border: 'none',
     position: 'top-bottom',
     borderRadius: '5%',
     alignSelf: 'center'
   };

  let ackForm = {
     alignSelf: 'center'
  };

 class Dialog extends Component {
     state = {
       isOpen: true
 } 

componentDidMount(){
    const isOpen = sessionStorage.getItem('isOpen') === 'false' 
    this.setState({ isOpen });
}

handleChange = (e) => {
    const input = e.target;
    const value = input.type === 'checkbox' ? input.checked : input.value;
}

ackSubmit = () => {
    const { isOpen } = this.state;
    sessionStorage.setItem('isOpen', isOpen);
};

render() {
    return (
        <div style={dialogStyles}>
            <div>{this.props.children}</div>
            <br/>
            <form onSubmit={this.ackSubmit} style={ackForm}>
                <input style={boxStyle} name='isOpen' checked={this.state.isOpen} onChange={this.handleChange} type="checkbox" />
                <button style={ackStyles} onChange={(e) => this.setState({       isOpen: false })}>ACKNOWLEDGE</button>
            </form>
        </div>
    );
   }
 }

export default Dialog;

class Dialog extends Component {
    state = {
        isOpen: !localStorage["alreadyVisited"];
    }
...