业务代码中，一个页面有多个模态框（不需要同时展示）的情况下，如何拆分组件？

dontdrinkmylemontea commented 5 years ago

假如一个页面有多个模态框，其中一部分长得很像，另一部分长得很像。都不能直接用ant design提供的简约版模态框，要用Modal组件。请问这种情况下该怎么拆分页面的组件？是所有模态框放一个模态框组件里：

<div className={styles.root}
  <Header />
  <Table />
  <Footer />
  <MyModals />
</div>

还是所有模态框都放在页面里？：

<div className={styles.root}
  <Header />
  <Table />
  <Footer />
  <Modal1 />
  <Modal2 />
  <Modal3 />
</div>

programmer-yang commented 5 years ago

Modal组件的核心是处理了展示方式或者说展示过程的事情，展示的内容它其实不是很关心，然后在React 16版本后添加了portals特性，Modal使用portals特性（额，这个使用过程有点绕大概流程是Modal => rc-dialog => rc-util/lib/PortalWrapper),总之，它是基于portals的特性来实现，所以没有必要手动把Modal放在全局，可以随时随地，想用就用，它都会渲染在根节点之外。

然后你提到的 很多部分一样，这里就要说到组件的意义之一-提取共性（我自己想的词，反正就是那么个意思咯^_^)，所以基于Modal二次封装，写个组件吧，通过一个type来区分不同的业务场景。最终的使用看起来是这样的

<div>
  <Header>
    <!-- header content -->
    <CustomModal type="header">
      <!-- header modal content -->
    </CustomModal>
  </Header>
  <Body>
    <!-- body content -->
    <CustomModal type="body">
      <!-- body modal content -->
    </CustomModal>
  </Body>
</div>

dontdrinkmylemontea commented 5 years ago

其实我的问题是同一个页面管理那么多的模态框组件的状态是否会太乱，然后我想到了，在合理的拆分下，一个页面是不应该有那么多模态框的……无聊的问题:cloud::cloud::cloud:

programmer-yang / blog

业务代码中，一个页面有多个模态框（不需要同时展示）的情况下，如何拆分组件？ #8