Reactjs React模式使页面向下移动

不知道为什么当我单击打开模式时，主屏幕会随着模式在其上的移动而下降：

---

我已经着手重构了你的应用程序。你有很多错误阻碍了你的申请

工作示例：

请仔细阅读以下注释：

使用npm包react-redux连接并分派到redux 将容器与组件分开： 当使用prop类型时，我建议在类之外定义proptype，我更喜欢在类或函数之外以及导出之前或之后。更多信息请参见此。 创建操作Redux的状态，并创建处理要操作的状态的类型。 Redux操作的常见约定是返回类型和有效负载，尽管有时可能不需要有效负载，并且所有还原程序都希望从操作中返回该类型和有效负载。 使用switch语句，而不是嵌套的if和else语句。 导入时请遵循以下顺序： 1.节点模块 2.组件/容器/动作/还原器/辅助函数 3.样式表 不要嵌套无效的HTML元素：div不能显示为p的子元素 不要使用模糊的道具名称：关闭、打开等。相反，应该更具声明性：closeModal、openModal等等。 不要使用下划线，因为这不是常见的JavaScript命名约定 使用可重用组件减少重复代码，例如：ModalColor！ 在本例中，更新Redux的状态不需要React状态。Redux可以通过actions和Reducer控制自己的状态。 在需要封装不需要包含HTML元素的JSX元素时使用或。 简化应用程序结构：

 ├── build
 |   ├── css
 |   |   ├── main.[contenthash:8].css
 |   |   └── main.[contenthash:8].css.map
 |   ├── js
 |   |   ├── main.[hash].js
 |   |   └── main.[hash].js.map
 |   ├── media
 |   |   └── [hash].[ext]
 |   └── favicon.ico
 |   └── index.html
 |
 ├── public
 |   ├── favicon.ico
 |   └── index.html
 |
 ├── src
 |   ├── actions
 |   ├── components
 |   ├── containers
 |   ├── images
 |   ├── reducers
 |   ├── routes
 |   ├── store
 |   ├── styles (global)
 |   ├── tests
 |   ├── types
 |   ├── utils
 |   ├── index.js
 |   ├── serviceWorker.js
 |   └── setupTests.js
 |
 ├── .gitignore
 ├── README.md
 ├── package.lock.json
 └── package.json