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

第

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

目录1.需求2.页面2.1父组件2.2子组件3.实现逻辑3.1父组件中构建ref3.2子组件中的相关操作4.父组件使用5.总结

1.需求

由于在项目开发过程中，我们往往时需要调用子组件中的方法。例如管理系统中的添加，就需要我们调用添加表单时展示的方法。从而实现页面的展示。在vue中我们知道可以给组件上添加ref从而获取到组件的实例对象。那么在React中我们该怎么办呢、

2.页面

2.1父组件

下面就是我们的父组件，其实就是类似于一个网站的头部，当我们点击用户登录时，就需要将我们写登录逻辑的页面展示出来。因此我们就需要调用对应的Ref从而帮助我们操作对应的子组件的方法。

constWebHeader=()={

constModelRef=useRefIFnChildInstance(null)

constChildrenFn=ModelRef.current!

functionuserLogin(){

ChildrenFn.showModal()

console.log(ChildrenFn.showModal)

return(

divclassName=header-containerfxfa

divclassName=wrappe