react自定义组件中使用ref

一、自定义组件使用ref并且透传子组件ref

自定义组件中使用ref需要用到react的2个hooks：
1.forwardRef
2.useImperativeHandle

• useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值
• useImperativeHandle 应当与 forwardRef 一起使用

自定义组件：

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      // 这里可以加自己的逻辑哦
      inputRef.current.focus();
    }
  }));

 return (
  

    
    
我是自定义的函数式组件
  
 )
});

使用：

import FancyInput from '@/components/FancyInput ';
const App = props => {
  const fancyInputRef = useRef();
  return (
    

      
       {fancyInputRef.current.focus()}}>
        调用FancyInput组件的 focus方法
      
    
  )
}

ReactDOM.render(, root);

二、React.forwardRef和connect的联合使用问题

先使用 React.forwardRef;再使用 connect 包一层会使 ref 属性漏掉，导致 内部实例无法传到外部；
正确的操作方式要调整高阶组件的顺序，先用connect包裹，然后再用React.forwardRef包裹。

const VerificationCode = (props: VerificationCodeType) => {
  useImperativeHandle(props.refInstance, () => ({  // 导出ref属性字段
    myFunction(){
      console.log('myFunction');
    }
  }));
  return <>;
};

const ConnectVerificationCode = connect(  // 链接dva
  ({ models }: { models: ModelsType }) => ({
    models,
  }),
)(VerificationCode);

export default forwardRef((props: VerificationCodeType, ref) => (  // 包裹forwardRef
  
));

这样就可以同时使用2个高阶组件了。