reactjs - React Modal 使页面崩溃

Question

不知道为什么当我单击打开模态时，主屏幕会随着模态的顶部而下降：

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

标签： reactjsreduxmodal-dialog

Answer 1

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

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

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

• 使用 npm 包react-redux（文档）连接和调度到redux
• containers将您与您分开components：https ://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
• 使用 时prop-types，我建议propTypes在您的课程之外定义（我更喜欢在classorfunction之前或之后定义它export）。有关详细信息，请参阅此。
• 创建actions操纵 Redux 的state并创建types处理state要操纵的内容。
• Redux 的常见约定actions是returnatype和payload（尽管有时 apayload可能不是必需的）并且所有人都reducers期望从动作中得到那个type和。payload
• switch为您if的. _elsereducers
• 阅读时import请遵循以下顺序：
  • 1.) 节点模块
  • 2.) 组件/容器/动作/Reducers/Helper 函数
  • 3.) 样式表
• 不要嵌套无效的 HTML 元素：（<p><div/></p>不能div作为childof出现p）
• 不要使用模糊的道具名称：close, open, ...等。而是更具声明性：closeModal, openModal, ... 等。
• 不要使用下划线_，因为这不是常见的 JavaScript 命名约定
• 使用可重用组件减少重复代码（例如：）ModalColor！
• state在这个例子中，不需要React来更新 Redux 的state. stateRedux 可以通过actions和控制自己的reducers。
• 当您需要封装不需要包含 HTML 元素的 JSX 元素时使用<Fragment></Fragment>or 。<></>

• 简化您的应用程序结构：

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