react：父组件调用子组件方法

需要用到的几个关键字：useRef，useImperativeHandle，.current，forwardRef

注意，如果直接在子组件上使用useRef，是拿不到想要的数据的。

官网解释：refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key一样，其被 React 进行了特殊处理。如果你对 HOC 添加 ref，该 ref 将引用最外层的容器组件，而不是被包裹的组件。我们可以使用 React.forwardRef API 明确地将 refs 转发到内部的 FancyButton 组件。React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点。

父组件：

import { useRef } from 'react'
import Child from './components/Child/Child'
const Father = () =>{
  const childRef = useRef(null)
  const fatherClick = () => {
      childRef.current.setData()
  }
  return (
      <div>
        <Child 
          ref={childRef}
          />
          <div onClick={fatherClick}>点击触发子组件事件</div>
      </div>
  )
}
export default Father

子组件：需要useImperativeHandle及forwardRef

import { useImperativeHandle,forwardRef } from 'react'
const Child = (props,ref) => { // 第一个props是其他的一些传值，第二个ref是父组件传递的ref属性
    useImperativeHandle(ref, () => ({ // 第一个ref是父组件传递的ref属性，第二个返回一个对象，供父组件.current调用
        setData: (params: any) => {
            // 搞事情
        }
    }))
}
export default forwardRef(Child)

useImperativeHandle：可以只暴露特定的操作，返回对象给父组件去操作；

forwardRef：通过forwardRef可以将ref转发给子组件