React Hook父组件如何获取子组件的数据/函数

useImperativeHandle(ref, createHandle, [deps])

 const mapRef = useRef(null);
    useImperativeHandle(ref, () => {
 
        return {
            //clickSwitch是子组件暴露的函数
            clickSwitch() {
             
                if(type == 1){
                    initChinaMap();
                    setType(2);
                }else{
                    initWordMap();
                    setType(1);
                }
              
            }
        }
    })
 
//你的return内容，注意ref
 
    return(
        <React.Fragment>
 
            <div id={"myWorldMap"} style={{ width: "800px", height: "400px" }}  ref={mapRef}></div>
 
        </React.Fragment>
 
 
    )
}
 
 
//最后要配合forwardRef
MyWorldMap = forwardRef(MyWorldMap);
export default MyWorldMap;

function MyWorldMap (props,ref){
//..你的代码
}
 
//export...

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

const myWordMapRef = useRef();
 
return(
  //省略一些代码，注意ref
 <MyWorldMap proData = { myMapData} handleMapClick = {handleMapClick.bind(this)} ref={myWordMapRef}>
 
 </MyWorldMap>
<div className={styles["mapButton-wrap"]}>
       <ButtonGroup>
               <Button onClick={() => myWordMapRef.current.clickSwitch()}>Switch</Button>
               <Button onClick={()=>clickAll() }>All</Button>
        </ButtonGroup>
 </div>
)

import React, { useState, useEffect, useRef }  from 'react';
import { Button } from 'antd';
import EditClassA from './EditClassA';
export default (): React.ReactNode => {
    const [isEdit,setIsEdit] = useState<boolean>(false);
    const editClassARef = useRef();
    const handleSave = () => {
        // 调用子组件的方法
        editClassARef.current.changeVal();
    }
    return (
        <div>
            {!isEdit?(
                <Button style={{marginRight:20}} onClick={()=>setIsEdit(!isEdit)}>编辑</Button>
            ):(
                <Button style={{marginRight:20}} onClick={handleSave}>保存</Button>
            )}
        </div>
        <EditClassA isEdit={isEdit} setIsEdit={setIsEdit} ref={editClassARef}/>
    )
}

import React, { useImperativeHandle, forwardRef }  from 'react';
import { Form , Input } from 'antd';
import style from '@/pages/BackEnd/style.less';
const EditClassA = forwardRef((props, ref) => {
    // props 里面有父组件的值和方法
    const [form] = Form.useForm();
    useImperativeHandle(ref, () => ({
        changeVal: () => {
            form
            .validateFields()
            .then( values => {
                // 调用父组件方法，设置父组件的值
                props.setIsEdit(!props.isEdit)
            })
            .catch(errorInfo => {
                return false
            })
        }
    }));
    return (
    <Form form={form} name="basic" colon={false} >
        <Form.Item
            label="总部名称"
            name="name"
            initialValue="总部"
            rules={[{required: true,message: '请输入总部名称',}]}>
            <Input className={props.isEdit?'':style.disabledInput} placeholder="请输入" disabled={!props.isEdit}/>
        </Form.Item>
    </Form>
    );
})
export default EditClassA

.disabledInput[disabled]{
  color: rgba(0, 0, 0, 0.85);
  background-color: transparent;
  cursor: default;
  border: unset;
  border-bottom: 1px solid #333;
}