网络日志

react hooks-理解useImperativeHandle

1、正常情况下 ref 是不能挂在到函数组件上的,因为函数组件没有实例,但是 useImperativeHandle 为我们提供了一个类似实例的东西。2、useImperativeHandle 的第 2 个参数,是一个函数,函数所返回的对象的内容挂载到父组件的ref.current 上3、函数组件使用ref需要跟forwardRef搭配使用,不然会报错4、实例

  1. 首先在父组件中给子组件定义ref
const childRef = useRef(null)
<GrandSon ref={childRef} />
  1. 子组件使用forWardRef定义
const GrandSon = forwardRef((props, ref) => {
  // 你可以在这使用 Hook
  console.log('props====',props);
  const divRef = useRef(null)
  const a = 'vvv'
  const aa=() => {
    console.log('aa');
  }
  useImperativeHandle(ref, () => {
    return {
      aa,
      a,
      divRef
    }
  })
  return <div className="bg" ref={divRef}>
    我是孙子组件
    </div>;
})

5、总结通过useImperativeHandle父组件可以拿到函数子组件的暴露特定的操作