React中使用TS完成父组件调用子组件的操作方法

const WebHeader = () => {
const ModelRef = useRef<IFnChildInstance>(null)
const ChildrenFn = ModelRef.current!
function userLogin(){
ChildrenFn.showModal()
console.log(ChildrenFn.showModal)
}
return (
<div className="header-container fx fa">
<div className="wrapper fx jb fa">
<div className="left-wrapper fx fa">
<img src="http://syt.atguigu.cn/_nuxt/img/logo.7086376.png" alt="网站loge" style={{width:'50px'}}/>
<span className='text link'>尚医通 预约挂号统一平台</span>
</div>
<div className="right-wrapper fx jb">
<span className='link-to'>帮助中心</span>
<span className='link-to' onClick={userLogin}>登录注册</span>
<Child ref={ModelRef}></Child>
</div>
</div>
</div>
)
}

const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（实际等于： resetSharePopup：resetSharePopup）
}));
function showModal(){
setIsModalOpen(true);
};
return(
<Modal title="Basic Modal" open={isModalOpen}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
)
})

const ModelRef = useRef<IFnChildInstance>(null)

interface IFnChildInstance {
        showModal: () => void,
}
//组件引用的地方
<Child ref={ModelRef}></Child>

import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
// ...
});

const Child = forwardRef<IFnChildInstance>((props,ref) => {
const [isModalOpen, setIsModalOpen] = useState(false);
useImperativeHandle(ref, () => ({
showModal, //（实际等于： resetSharePopup：resetSharePopup）
}));
function showModal(){
setIsModalOpen(true);
};
return(
<Modal title="Basic Modal" open={isModalOpen}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
)
})

const ModelRef = useRef<IFnChildInstance>(null)
  const ChildrenFn = ModelRef.current!
  function userLogin(){
    ChildrenFn.showModal()
   console.log(ChildrenFn.showModal)