最近在做一個項目，把原來的vue2工程用react重構，遇到了這樣一個場景。

頁面有keepAlive，在vue2項目中，用原生的keepAlive實現。react項目中為了實現keepAlive引入了react-activation依賴。

react-activation的使用，本文不表，下面看我遇到的問題。

在概覽頁(列表頁)，鼠標移入之後，出現Tooltip，點擊此選項，頁面跳轉(進入新頁面)，但是tooltip不會消失。

並且，從編輯頁回跳回概覽頁的時候，這個Tooltip依然存在。

分析原因，Tooltip默認情況下，mouseEnter的時候顯示，mouseLeave的時候消失，react-activation 實現keepAlive直接撤走了 dom，導致沒機會觸發鼠標mouseLeave了。

要解決上述問題 (1.離開概覽頁Tooltip消失，不在新頁面展示 2.返回概覽頁Tooltip不出現)，有兩種方案。

其一是封裝子組件 + 受控模式，讓Tooltip的開啓關閉由open屬性控制，open屬性綁定的值，由useUnactivate hooks控制，在離開概覽頁時關閉Tooltip。

其二是調整Tooltip掛載點 + 自增key
調整Tooltip掛載點，將Tooltip掛載到Tooltip的父元素，可以使得離開概覽頁Tooltip消失。但是僅調整掛載點，返回概覽頁時Tooltip依然會出現。因此還需要自增key，當回到頁面，useActivate 觸發 -> activationKey + 1 -> Tooltip 的 key 改變 -> React 銷燬舊的“開着”的Tooltip，渲染一個新的“默認關閉”的Tooltip。 這是一個有些取巧的方案，卻是實用的。

下面給出方案二的核心實現

完結。

同步更新到自己的語雀
https://www.yuque.com/dirackeeko/blog/msiebwb2uml3orop