React Hook父组件调用子组件的方法

13,096 阅读1分钟

情景:

略(暂时没总结)

方法:

父组件使用 useRef 创建一个 ref 传入 子组件

...
const childrenRef = useRef(null);
...
return <children ref={childrenRef} />

子组件需要使用 useImperativeHandle 暴露 ref 自定义的实例值给父组件。这个需要用 forwardRef 包裹着。

function children(props, ref) {
    useImperativeHandle(ref, () => ({
        hello: () => console.log('hello world!')
    }))
    return <h1>children</h1>
}
export default forwardRef(children);

那么在父组件怎么调用呢?

...
const childrenRef = useRef(null);
const something = () => childrenRef.current.hello();
...

建议:

还是可以查看一下实现方法的关键点: useRef, useImperativeHandle, forwardRef。其实是利用了 ref 不变的性质,将子组件的方法保存着,父组件可以调用。可以说,ref 作为父组件和子组件的一座由父组件到达子组件的桥梁(单向的,父->子)。

粗浅见识,请带着思考和自己的见解,如有斧正,请不吝赐教。