组件封装----useImperativeHandle和ref

useImperativeHandle(ref, createHandle, [deps])

• 作用: 减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法

• 参数1: 父组件传递的ref属性

• 参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法

在子组件中使用useImperativeHandle向父组件暴露出父组件想要的数据

const Index = ({ form_guid, handleValueChange }: Props, ref: React.Ref<unknown> | undefined) => {

　　useImperativeHandle(ref, () => ({

　　validate: validate,

　　}))

}

export default forwardRef(Index)

在父组件中

const Index = (props: ComponentProps) => {

  // 创建ref

  const formViewRef: MutableRefObject<any> = useRef()

  // 使用子组件的数据

  const handleSave = () => {

    const validateStatus = formViewRef.current.validate()

  }

  return (

    // 使用ref

    <FormView ref={formViewRef} form_guid={form_guid} handleValueChange={handleValueChange} />

)