函数组件中父组件调用子组件的方法

主要使用forwardRef和useImperativeHandle两个Hooks函数

父组件通过useRef获取子组件实例

const refQrcode =  useRef(null)
return(<child ref={refQrcode}/>)

子组件使用forwardRef,useImperativeHandle两个hooks函数

import React, { useState, forwardRef,useImperativeHandle } from "react";
// import { AtIcon, AtButton } from "taro-ui";
import { Button } from "@tarojs/components";
import QRCode from "qrcode.react";
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";

const Qrcode = forwardRef((props,ref) => {
    const [show, setShow] = useState(false);
    useImperativeHandle(ref, () => ({
        createQRCode
    }))
    const createQRCode = () => {
        setShow(true);
    };
    return (
        <AtModal isOpened={show} >
            <AtModalContent>
                <QRCode
                    value={props.qrUrl} //value参数为生成二维码的链接
                    size={200} //二维码的宽高尺寸
                    fgColor="#000000" //二维码的颜色
                />
            </AtModalContent>
            <AtModalAction>
                {" "}
                <Button>确定</Button>{" "}
            </AtModalAction>
        </AtModal>
    );
});
export default Qrcode;