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