react hooks 之 useImperativeHandle

useImperativeHandle

是父组件调用子组件的方法

他一般配合forwardRef使用

下边是他在实战中的具体用法

比如说我们创建一个父组件 index.tsx，还有一个子组件 test.tsx

我们想在父组件里边调用子组件里边的自定义方法的话 我们就可以通过 useImperativeHandle去实现 废话 不多说 直接上代码！！

首先是在子组件test.tsx中：

//子组件文件中
function test({ }, ref) {
    //创建一个getList方法
    const getList = () => {
        console.log('我已经被调用');
    }
    //通过useImperativeHandle把getList方法给抛出去
    useImperativeHandle(ref, () => ({
        getList
    }));
    return <div>123</div>
}
//通过forwardRef把子组件的ref给导出 然后再父组件里边就可以引用啦
export default forwardRef(test);

父组件 index.tsx中：

import Test from './test'

function main() {
//创建一个ref 值为null
  const testRef = useRef<any>(null);
  //创建一个点击事件
  const btn = () => {
     //通过***.current.****()方法 ，就可以直接调用子组件里边定义的方法啦！！！！
    testRef.current.getList()
  }

  return (
    <div>
      <button onClick={ btn }>测试调用子组件的方法</button>
      //通过ref获取到子组件的实例
      <Test ref={ testRef }></Test>
    </div>
  )
}
export default main