react 获取函数组件ref使用，获取子组件属性方法

• 一言难尽，总结记录

子组件

• 不能在函数式组件上使用ref属性，因为他们没有实例。
• 使用hook useImperativeHandle 配合forwardRef使用实现子组件内部属性在父组件中调用

import React, { useImperativeHandle, forwardRef } from "react";
import { Form } from 'antd';
const Example = forwardRef((props, ref) => {
	const [form] = Form.useForm();
	
	useImperativeHandle(ref, () => ({
		myForm: form,
	}));
	
	const handleSubmit = (vals) => {}
	const { initData } = props;
	
	return (<Form form={form} onFinish={handleSubmit} initialValues={{ ...initData }}>
}))

父组件

import React, { useRef } from "react";
import Example from "./Example";
const Father = (props) => {
	const exampleRef= useRef(null);
	<Example ref={exampleRef} />
}

• 在父组件的exampleRef中可以获取到子组件定义的myForm属性，同理自定义配置需要在父组件中使用的属性和方法