【react】父组件获取子组件实例对象/方法

参考：React Hooks父组件中获取子组件实例值、React父组件调用子组件的方法

方法：ref + forwardRef + useImperativeHandle，常用于获取子组件的 formFields校验、state、方法等

子组件：

const ConfigForm = (props: Prop, ref: any) => {
  const [form] = Form.useForm();
  
  // 将子组件中值暴露给父组件
  useImperativeHandle(ref, () => ({
    getFieldsForm: form, // 获取组件实例
    resetTable: () => resetTable(), // 获取组件方法
  }));
  
  return (<Form></Form>);
}

const FormConfig = forwardRef(ConfigForm);
export default FormConfig;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

父组件：

const FatherTable = () => {
  const getTableValue = useRef();
  
  const resetGroup = () => {
  // 调用子组件的方法
  const { resetTable }: any = getTableValue.current;
  resetTable();
  };
  
  return (<ConfigForm ref={getTableValue}/>);
}
1
2
3
4
5
6
7
8
9
10
11