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} />
)
