React中使用Hooks - useImperativeHandle

useImperativeHandle

useImperativeHandle(ref, createHandle, dependencies?)

可以使用 useImperativeHandle 来暴露一些特定的操作，
在子组件中使用useImperativeHandle可以减少暴露给父组件获取的DOM元素属性，只暴露给父组件方法

举个栗子：

在子组件中，

import React, { useEffect, useState, useImperativeHandle, forwardRef, useRef, MutableRefObject } from "react";

// 将方法暴露给父组件

useImperativeHandle(ref, () => ({
	 formData,
	 onFinish,
	 submit,
}))

在父组件中，

import React, { useState, useEffect, useRef, MutableRefObject } from 'react'

在组件里面

const detailRef: MutableRefObject<any> = useRef();

然后就可以使用detailRef.current.暴露的方法

detailRef.current.onFinish()
// 获取表单内容
detailRef.current.formData

注意： 在使用的时候子组件要使用forwardRef包裹组件

import { forwardRef } from "react"
...............

export default forwardRef(modelDetails)