search

yuxino / blog

🎬 Life's a Movie
17 stars 2 forks source link

弹窗设计思考 #112

Closed yuxino closed 4 years ago

yuxino commented 4 years ago

弹窗基本上是日常前端里面用到最频繁的组件之一了。不管是手机端还是PC端都会用到弹窗。用来做一些提示性的，功能性的子页面。

如果我是面试官的话，我会认为这个拿来做开放面试题是蛮不错的，可以考察面试者对组件，工程的理解。

大多数时间我们写c端应用，都会有自己的组件风格，设计风格，所以基本上是不是用ui库的。那么我们必经之路就是实现一个弹窗or找一个社区里能用的弹窗。我们这里选择自己做一个弹窗。

那么第一个问题「做出弹窗组件难吗」?

答案是: 不难，就算是新手也能写得出来。

基本就是处理层级关系以及把节点挂载到body下面诸如此类。

image

如何把挂载到body

这是我们第一个碰到的问题。有两种方法，这俩种方式奠定了我们之后要实现的两种模式。首先是第一种。

ReactDom.createPortal

Portal就是传送门。这名字中二又浪漫让我忍不住要说一下这个，本来不想说的。

为什么叫做传送门呢。你可以想象一下平时写的组件大概是这样的。一级一级的。

<App>
  <HEADER />
  <BODY>
     <COMPONENT A />
     <COMPONENT B />
     <COMPONENT C>
       <COMPONENT D/>
     </COMPONENT C>
  </BODY>
  <FOOTER />
<App>

对应的示意图如下

image

但是如果是弹窗或者一些东西的话，这么做会碰上很多的麻烦。样式上的处理会变得更加复杂。那么有没有办法做到这样的事情，比如把COMPONENT D挂载到body下面去呢?

image

有办法,createProtal就是其中一种。在我们不需要改任结构的基础上做到这个事情。我们只需要改造一下COMPONENT D就可以了。

// COMPONENT D
render() {
  return ReactDOM.createPortal(
    // 原本render里面的代码,
    document.body
  );
}