实作第二篇要来介绍的是 Portal 系列的实作，会一路从 Portal 实作到 Popconfirm，Overlay、Modal 就等之後有机会再做了！

开始前先简短复习一下元件各自的执掌！

1. Portal → 传送功能
2. Popper → 提供传送的定位（Anchor）
3. Popover → Popper ＋ 样式
4. Popconfirm → Popover + ConfirmActions（一组确认＋取消按钮）

想先看 Code 或是 Demo 的由此去：

Github Repo： ithelp-ui-demo
Live Demo：Portal

Portal

Interface / API

一样先介绍一下它的介面会包含什麽：

写成 Interface 会长这样：

ElementGetter 列出了各种可当作 HTMLElement 的可能性。

元件实作

主要是使用 React 的 createPortal API 来实作 Portal，并且在想传送的元素 (portalElement)传过去前做一些处理，像是取消 Portal 功能、预设 Portal 到 body 上等等。

而 getElement 只是针对上述四种型态把它们都转换成单纯的 HTMLElement，毕竟要这样才能当作 createPortal 的参数。

Popper

在实作 popper 这边就要推荐个很赞的小东西 — react-popper，在 Popper 这边最麻烦的就是因应各种情况而导致 Popper 资讯会被挡到显示不完全，因此 react-popper 能帮我们自动去计算与萤幕的距离来自动推断要呈现的方位，当然也可以自定义

Interface / API

在这边主要就是沿用 Portal 的 Props 再扩充一下。

元件实作

里面要熟悉的主要是 react-poper 在干嘛以及怎麽用，而 useImperativeHandle 是方便我们无视原本的阶层关系的 React 官方 hook 里！

Popover 和 Popconfirm 就也只是运用 Portal → Popper 的观念继续用 Popper 封装成 Popover ，用 Popover 组出 Popconfirm 这样，就先不在这边继续讲解了！