React Modal 使页面下降

Question

不知道为什么当我点击打开模态框时，主屏幕变暗，因为模态框在它上面：

https://github.com/RodPin/Modal-with-Redux

Answer 1

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

工作示例：https://codesandbox.io/s/xj553k7nno

请仔细阅读以下注意事项:

使用 npm 包 react-redux (documentation) 连接并发送到 redux
将您的 containers 与 components 分开：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
使用 prop-types 时，我建议在 class 之外定义 propTypes（我更喜欢在 class 或 function 和export 之前或之后）。查看更多 details。
创建 actions 来操作 Redux 的 state 并创建 types 来处理 state 操作。
Redux actions 的通用约定是 return 一个 type 和 payload（尽管有时 payload 可能不是必需的）并且对所有reducers 期待 type 和 payload 的行动。
为您的 reducers.

switch

if

else

当importing时请按照以下顺序：
- 1.) 节点模块
- 2.) Components/Containers/Actions/Reducers/Helper 函数
- 3.) 样式表
不要嵌套无效的 HTML 元素：<p><div/></p>（div 不能作为 p 的 child 出现）
不要使用模糊的道具名称：close、open、...等。而是更具声明性：closeModal、openModal、...等等
不要使用下划线 _ 因为这不是常见的 JavaScript 命名约定
使用可重复使用的组件减少重复代码（例如：ModalColor）！
在此示例中，不需要 React state 来更新 Redux 的 state。 Redux 可以通过 actions 和 reducers.

state

当您需要封装不需要包含 HTML 元素的 JSX 元素时，请使用 <Fragment></Fragment> 或 <></>。

简化您的应用程序结构：

 ├── 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

React Modal 使页面下降

React Modal makes page goes down

modal-dialog

reactjs

redux