hook父组件获取子组件方法属性

父子组件通讯

父组件访问子组件

在hook的函数组件中，通过ref绑定子组件直接访问是不行的，因为它们没有实例。hook提供了forwardRef, useImperativeHandle来解决，通过forwardRef包裹之组件，可以通过参数将ref传递给子组件，再通过useImperativeHandle对父组件暴露出需要的属性，父组件通过Ref.current.xxx即可访问子组件暴露的相关属性。如果是多层组件，可以再暴露出下级组件的ref。

撸代码：

子组件
import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
import { Drawer } from 'antd';

const DrawerCustom = (props, ref) => {
    const inDrawer = useRef(null);
    let [visible, setVisible] = useState(false);
    let showDrawer = () => {
        setVisible(true);
    };
    useImperativeHandle(ref, () => {
        return {
            showDrawer,
        };
    });
    let onClose = () => {
        props._close && props._close();
        setVisible(false);
    };
    return (
        <div>
            <Drawer
                title={props.title || '抽屉组件'}
                placement={props.placement || 'right'}
                closable={false}
                onClose={onClose}
                visible={visible}
                mask={props.mask || true}
                getContainer={props.getContainer || document.body}
                destroyOnClose={props.destroyOnClose || true}
                maskClosable={props.maskClosable || true}
            >
                {(props.childen && props.childen) || '暂无数据'}
            </Drawer>
        </div>
    );
};

export default forwardRef(DrawerCustom);

父组件

<DrawerCustom ref={refDrawer}>日志</DrawerCustom>
      
访问

 refDrawer.current.showDrawer();