react 父组件调用子组件方法：forwardRef + useImperativeHandle

forwardRef + useImperativeHandle

• forwardRef 适用于需要让父组件操作子组件内部 DOM
• 使用 useImperativeHandle 向父组件暴露方法

父组件：

import React, { useRef } from 'react'

const NodeBox: React.FC<MyComponentProps> = ({ nodeinfo }) => {
  const nodeRef = useRef(null)
  return (
  	  <button onClick={() => nodeRef.current?.fn()}></button>
      <Node ref={nodeRef} nodeinfo={nodeinfo} />
  )
}

子组件：

import React, { useImperativeHandle, forwardRef } from 'react'

// forwardRef 适用于需要让父组件操作子组件内部 DOM
const Node = forwardRef(({ nodeinfo }: MyComponentProps, ref) => {
  const fn = () => {
  }

  // 使用 useImperativeHandle 向父组件暴露方法
  useImperativeHandle(ref, () => ({
    fn,
  }))
  
  return <></> 
})