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 <></> })