React函数组件之---父组件调用子组件方法

tips：默认情况下，你不能在函数组件上使用 ref 属性，因为它们没有实例 如果要在函数组件中使用 ref，你可以使用 forwardRef（可与 useImperativeHandle 结合使用），或者可以将该组件转化为 class 组件。

示例：

// 父组件：
const Parent = () => {
  const childRef = useRef(null)
  const useChildFun = () => {
    childRef.current.getChildMessage()
  }
  return (
    <>
      <ChildElement ref={childRef} />
      <Button onClick={useChildFun}>使用子组件方法</Button>
    </>
  )
}
 
export default Parent

// 子组件：
const ChildElement = forwardRef(
  (props, ref) => {
  const getChildMessage = 
  }
  useImperativeHandle(ref, () => ({
    getChildMessage:() => ( console.log('子组件方法调用') )
  }))
  return <div>Child</div>
}
)
 
export default ChildElement

如此即可获取到函数组件的实例。