refactor/findDomNode

src/components/popover/popover.tsx

@@ -34,7 +34,7 @@ import {
 import { Arrow } from './arrow'
 import { DeprecatedPlacement, Placement } from './index'
 import { normalizePlacement } from './normalize-placement'
-import { Wrapper } from './wrapper'
+import { Wrapper, WrapperRef } from './wrapper'
 
 const classPrefix = `adm-popover`
 
@@ -86,7 +86,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
     [visible]
   )
 
-  const targetRef = useRef<Wrapper>(null)
+  const wrapperRef = useRef<WrapperRef>(null)
   const floatingRef = useRef<HTMLDivElement>(null)
   const arrowRef = useRef<HTMLDivElement>(null)
 
@@ -113,7 +113,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
   const [targetElement, setTargetElement] = useState<Element | null>(null)
 
   async function update() {
-    const target = targetRef.current?.element ?? null
+    const target = wrapperRef.current?.element ?? null
     const floating = floatingRef.current
     const arrowElement = arrowRef.current
     setTargetElement(target)
@@ -198,15 +198,15 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
       if (!props.trigger) return
       setVisible(false)
     },
-    [() => targetRef.current?.element, floatingRef],
+    [() => wrapperRef.current?.element, floatingRef],
     ['click', 'touchmove']
   )
 
   const shouldRender = useShouldRender(visible, false, props.destroyOnHide)
 
   return (
     <>
-      <Wrapper ref={targetRef}>{props.children}</Wrapper>
+      <Wrapper ref={wrapperRef}>{props.children}</Wrapper>
       {shouldRender && renderToContainer(props.getContainer, floating)}
     </>
   )

src/components/popover/wrapper.tsx

@@ -1,29 +1,29 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import { findDOMNode } from 'react-dom'
+import React, { ReactElement, useImperativeHandle, useRef } from 'react'
 
-export class Wrapper extends React.Component<
-  {
-    children?: ReactNode
-  },
-  {}
-> {
-  element: Element | null = null
-  componentDidMount() {
-    this.componentDidUpdate()
-  }
+export interface WrapperRef {
+  element: Element
+}
 
-  componentDidUpdate() {
-    // eslint-disable-next-line
-    const node = findDOMNode(this)
-    if (node instanceof Element) {
-      this.element = node
-    } else {
-      this.element = null
-    }
-  }
+export const Wrapper = React.forwardRef<WrapperRef, { children: ReactElement }>(
+  ({ children }, ref) => {
+    const childRef = useRef<any>(null)
 
-  render() {
-    return React.Children.only(this.props.children)
+    useImperativeHandle(ref, () => ({
+      element: childRef.current,
+    }))
+
+    return (
+      <>
+        <span
+          style={{ display: 'none' }}
+          ref={el => {
+            if (el) {
+              childRef.current = el.nextElementSibling
+            }
+          }}
+        />
+        {React.Children.only(children)}
+      </>
+    )
   }
-}
+)