一、父组件调用子组件的方法

1、效果

• 父组件：NationalDirectory
• 子组件：DepTree
• 父组件点击【重置】时，调用子组件onSearch方法重新恢复到初始状态

2、使用方式

1. 子组件

import { useImperativeHandle, forwardRef } from 'react'

const DepTree = (props, ref) => {

  const onSearch = () => { ...一些逻辑 }

  useImperativeHandle(ref, () => ({ onSearch }))
  
  return 
}

export default forwardRef(DepTree)

2. 父组件

import { useRef } from 'react'

const NationalDirectory = () => {
  const depTreeRef = useRef()
  
  // 重置
  const handleReset = () => {
    form.resetFields()
    depTreeRef.current.onSearch() // 调用子组件的onSearch
  }
  
  return (
    <>
      ...
      
      <DepTree ref={depTreeRef} />
    </>
  )
}

export default NationalDirectory

二、子组件调用父组件的方法

1、效果

• 子组件点击【返回】时，调用父组件【重置】按钮的回调

2、使用方式

1. 父组件

  const handleReset = () => {
    form.resetFields()
  }
  
  <DepTree handleReset={handleReset} />

2. 子组件

        <div className={styles.header}>
          全国通讯录<Button onClick={props.handleReset}>返回</Button>
        </div>