React中useImperativeHandle暴露属性重叠，子组件方法无法调用如何解决

问题根因 #

报错是因为同一个ref对象被两次useImperativeHandle绑定赋值，后执行的赋值会直接覆盖前一次的ref.current值，因此你的UsernameInput目前只暴露了自定义的getUsernameInformation方法，TextInput原本的blur、focus等方法都被覆盖丢失。

解决方案 #

不要直接将父组件传入的ref透传给TextInput，而是在UsernameInput内部维护一个绑定TextInput的私有ref，再把TextInput暴露的方法和你自定义的方法合并后，通过useImperativeHandle暴露给父组件即可。

修改后的UsernameInput代码如下：

import { useRef } from 'react';

const UsernameInput = forwardRef(
  (
    {
      ...
    },
    ref
  ) => {
     // 内部私有ref，用来绑定TextInput组件
     const textInputRef = useRef(null);

     useImperativeHandle(
       ref,
       () => ({
         // 合并TextInput暴露的所有原生方法
         ...textInputRef.current,
         // 追加你自定义的方法
         getUsernameInformation: () => usernameInformation,
         
         // 可选优化：如果担心textInputRef未初始化时报错，可以手动转发每个方法并加可选链
         // blur: () => textInputRef.current?.blur(),
         // focus: () => textInputRef.current?.focus(),
         // getText: () => textInputRef.current?.getText(),
         // setText: (val) => textInputRef.current?.setText(val),
       }),
       // 依赖项补充textInputRef.current保证方法更新时同步
       [usernameInformation, textInputRef.current]
     );

     // 把私有ref传给TextInput，不再透传父级传入的ref
     return <TextInput ref={textInputRef} />
  });

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