在前端开发过程中，我们经常会遇到需要调用子组件的方法的情况。例如：在父组件中操作子组件实现某些功能、某个事件触发后调用子组件的方法等等。
通过 ref 获取子组件实例
要调用子组件的方法，首先需要获取子组件的实例。在 React 中，我们可以使用 ref 来获取子组件的实例。我们在 render 函数中给子组件加上 ref：
----- ------ ------- --------------- -
------------------ -
-------------
------------- - ------------------
-
------------- -
-- --------
------------------------------------
-
-------- -
------ -
-----
------ ------------------- --
------- ----------- -- ------------------------------------
------
--
-
-
----- ----- ------- --------------- -
------------- -
------------------------
-
-------- -
------ -----------------
-
-在父组件的构造函数中，我们通过 React.createRef() 创建一个 ref ，然后将 ref 传递给子组件的 ref 属性中。在父组件中定义一个函数 handleClick ，在这个函数中可以通过 this.childRef.current 获取到子组件实例。然后就可以调用子组件的方法了。在本示例中，我们在父组件中定义了一个按钮，当点击这个按钮时，就会调用子组件的 childMethod 方法。
注意事项
- 要使用
ref来获取子组件的实例，子组件必须是类组件。因为函数式组件没有实例。 - 在 React 中，通常不建议直接操作子组件的 DOM。更好的方式是通过 props 将数据传递给子组件，在子组件内部进行处理和展示。
- 如果你在使用 React 16.3 以前的版本，可能需要使用字符串 ref 的方式来获取子组件的实例。
总结
调用子组件的方法是在前端开发中经常遇到的问题。通过使用 ref ，我们可以轻松地获取子组件的实例并调用其方法。但是，我们要注意不要直接操作子组件的 DOM，并尽量使用 props 来传递数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14783