如何扩展带forwardRef的React组件，同时暴露自定义与原生方法？

要实现既能调用自定义方法又能访问原生button所有方法的需求，不需要移除forwardRef，而是要正确使用useImperativeHandle来暴露合并了原生实例和自定义方法的对象。具体步骤如下：

1. 定义扩展的Ref类型 #

先创建TypeScript接口，继承原生HTMLButtonElement的所有属性，再添加自定义的doubleClick方法：

interface ExtendedButtonRef extends HTMLButtonElement {
  doubleClick: () => void;
}

2. 修改ExtendedButton组件 #

在useImperativeHandle中返回一个包含原生button实例和自定义方法的对象，用对象展开运算符把原生button的所有属性方法都包含进去，再加上自定义逻辑：

import { forwardRef, useRef, useImperativeHandle } from 'react';

const ExtendedButton = forwardRef<ExtendedButtonRef, React.HTMLAttributes<HTMLButtonElement>>((props, ref) => {
  const btnRef = useRef<HTMLButtonElement>(null);

  const doubleClick = () => {
    btnRef.current?.click();
    btnRef.current?.click();
  };

  // 暴露合并后的实例给父组件ref
  useImperativeHandle(ref, () => ({
    ...btnRef.current,
    doubleClick,
  }), [btnRef.current]);

  return <button {...props} ref={btnRef}></button>;
});

3. 消费组件中使用扩展后的Ref类型 #

消费组件的ref指定为我们定义的ExtendedButtonRef类型，即可同时调用原生方法和自定义方法：

import { useRef } from 'react';
import ExtendedButton from './ExtendedButton';

export const Consumer = () => {
  const ref = useRef<ExtendedButtonRef>(null);

  const handleTriggerDoubleClick = () => {
    ref.current?.doubleClick();
  };

  const handleTriggerClick = () => {
    ref.current?.click();
  };

  return (
    <div>
      <ExtendedButton ref={ref}>按钮</ExtendedButton>
      <button onClick={handleTriggerDoubleClick}>触发双击</button>
      <button onClick={handleTriggerClick}>触发单击</button>
    </div>
  );
};

为什么不能直接移除forwardRef？ #

函数组件本身没有实例，移除forwardRef后，父组件的ref会指向这个函数组件的“实例”（实际不存在），根本无法访问内部的btnRef和doubleClick方法。所以forwardRef是必须的，关键是通过useImperativeHandle正确暴露需要的接口。

内容的提问来源于stack exchange，提问作者mottosson