[JavaScript知识库]React Hooks+Typescript 中 父组件调用子组件方法.

父组件

import React, { useRef } from 'react';
import MyModl from './MyModl';

const Editor = () => {
 let ChildRef:any = useRef();
  
 const sumbitArticle = () => {
 	// 调用子组件方法
  	ChildRef.current.formResetFields();
 }

  return (
    <div>
   	// 子组件
      <MyModl onRef={ChildRef} />
    </div>
  );
}

export default Editor;

子组件

import React, {useImperativeHandle } from 'react';
 
const MyModel = (props: {onRef: any}) => {
  //用useImperativeHandle暴露一些外部ref能访问的属性
  useImperativeHandle(props.onRef, () => {
    // 需要将暴露的接口返回出去
    return {
      formResetFields: formResetFields,
    };
  });

  // 需要被调用的方法
  const formResetFields = () => {
    console.log('我是被调用的方法')
  }

  return (
      <Modal title="填写文章标题" visible={props.isModalVisible} ></Modal>
  );
};

export default MyModel;