给ActionIcon增加Ref转发以方便控制DOM。

src/components/ActionIcon.tsx

@@ -1,15 +1,16 @@
 import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { MouseEvent, MouseEventHandler, useCallback } from 'react';
+import { MouseEvent, MouseEventHandler, RefObject, useCallback } from 'react';
 import styles from './ActionIcon.module.css';
 
 type ActionIconProps = {
   icon: IconProps['icon'];
   onClick?: MouseEventHandler<HTMLButtonElement>;
   extendClassName?: HTMLButtonElement['className'];
+  ref: RefObject<HTMLButtonElement>;
 };
 
-export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps) {
+export function ActionIcon({ icon, onClick, extendClassName, ref }: ActionIconProps) {
   const handleClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
       onClick?.(event);
@@ -18,7 +19,11 @@ export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps)
   );
 
   return (
-    <button type="button" onClick={handleClick} className={cx(styles.action_icon, extendClassName)}>
+    <button
+      type="button"
+      onClick={handleClick}
+      className={cx(styles.action_icon, extendClassName)}
+      ref={ref}>
       <Icon icon={icon} className={styles.icon} />
     </button>
   );