如何通过React TypeScript实现父组件调用子组件的方法？

本文共计1819个文字，预计阅读时间需要8分钟。

目录

1.需求

2.页面

2.1 父组件 2.2 子组件

3.实现逻辑

3.1 父组件构建ref 3.2 子组件相关操作

4.父组件使用

5.总结

1. 需求 由于项目开发过程中，我们经常需要调用子组件中的方法。

目录

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

1.需求

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

2.页面

2.1父组件

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