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时，建议您在课堂外定义propTypes（我更喜欢在class或function中以及在{{ 1}}）。详情请参见details。
• 创建export来处理Redux的actions，并创建state来处理要操作的types。
• Redux state的通用约定是actions和return（尽管有时不需要type）和所有{{ 1}}期望动作中有payload和payload。
• 为您的reducers使用type语句，而不是嵌套的payload和switch语句。
• if支付时，请遵循以下顺序：
  • 1。）节点模块
  • 2。）组件/容器/动作/归约器/帮助器功能
  • 3。）样式表
• 请勿嵌套无效的HTML元素：else（reducers不能显示为import中的<p><div/></p>）
• 请勿使用含糊不清的道具名称：div，child等。相反，应更具声明性：p，close，...等。
• 请勿使用下划线open，因为这不是常见的JavaScript命名约定
• 使用可重复使用的组件减少重复代码（例如：closeModal）！
• 在此示例中，不需要React openModal来更新Redux的_。 Redux可以通过ModalColor和state控制自己的state。
• 当您需要封装不需要包含HTML元素的JSX元素时，请使用state或actions。

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

  reducers