react.forwordRef封装插件

平时我们在写react代码的时候经常会在div标签上面加上ref这样的参数来获取div的实例，但是我们自己封装的组件如果直接传ref是获取不到我们封装的组件的实例的。
这里我们就需要用到react.forwordRef来封装组件这样就可以直接通过在标签上直接传递ref来获取组件的实例了。
forwordRef组件这里我加入了ts类型规范并将ts的规范暴露出来这样在我们要是用组件的时候将ts也一起拿到来规范代码。

import React, {useImperativeHandle} from 'react'

export declare interface ForwordRefType {
  init: (n?: number) => void;
  start: () => void;
  end: (e: string) => void
}

const ForwordRef = React.forwardRef((props, ref) => {
  useImperativeHandle(
    ref, () => ({
      init: (e = 10) => {
        console.log(e, 'init')
      },
      start: () => {
        console.log('start')
      },
      end: (e) => {
        console.log(e, 'end')
      }
    } as ForwordRefType)
  )
  return (
    <div>
      ForwordRef的组件
    </div>
  )
})

export default ForwordRef

使用forwordRef组件，这样封装起来的组件就和antd的组件库通过ref获取组件实例类似了

import React, { useEffect, useRef } from 'react';

import ForwordRef, {ForwordRefType} from './components/forwordref'

const App = (): JSX.Element => {
  const forwordRef = useRef<ForwordRefType>()
  useEffect(() => {
    forwordRef.current?.init()
    forwordRef.current?.end('end')
  }, []);
  return (
    <div>
      0-1搭建react项目
      <ForwordRef ref={forwordRef} />
    </div>
  );
};

export default App;

总结：使用forwordRef和不使用forwordRef的主要区别就在是否可以直接使用ref关键词来转发refs普通组件可以换个关键字例如cref这样的。但是作为一个有强迫症的程序员还是要在这里把这个症结给解决一下的