父调子

在React中,父组件直接调用子组件的方法并不符合React单项数据流的原则(即数据自上而下流动)。然而,有几种模式可以实现类似的功能,主要是通过回调函数或者使用refs。

方法1:回调函数

这是最常见的模式,已经在上面的回答中有所提及。简单来说,就是父组件将一个处理函数作为prop传递给子组件,子组件在适当的时候调用这个函数,从而“通知”父组件发生了某个事件。

方法2:使用Refs调用子组件方法

尽管不鼓励频繁使用,但在某些特定场景下(比如进行DOM操作、管理复杂的组件间交互等),可以通过Refs来直接访问子组件的实例和方法。
  1. 父组件:创建一个ref并将其绑定到子组件上。
  1. 子组件:暴露需要被父组件调用的方法。
直接通过Refs调用子组件方法应当谨慎使用,确保没有更好的设计模式可以替代。在大多数情况下,通过状态提升(Lifting State Up)和回调函数来管理组件间的交互会是更“React式”的选择。
Loading...
目录
文章列表
王小扬博客
产品
Think
Git
软件开发
计算机网络
CI
DB
设计
缓存
Docker
Node
操作系统
Java
大前端
Nestjs
其他
PHP