React 子组件使用高阶函数注解后,解决父组件中无法获取其ref实例情况

       最近在整理react项目的基建代码,抽取高阶组件,使用@注解之后发现子组件没法获取ref实例。

参见下面的代码

父组件的代码

在函数内获取实例

获取实例的函数

遵循面向百度编程的原则,百度了一大波:


尝试了百度的方法

控制台的打印情况:


打印的结果

对象为空,百思不得其解的情况,做了如下的改进:


父组件上自定义属性

子组件做如下处理:

将子组件的实例传回父组件

在控制台的打印父组件:


父组件的打印


控制台获取到的实例

思路:子组件与父组件的props 数据流向特性,受控组件与非受控组件的。开始上手react之前,熟读一遍react官方文档。熟练使用了react上手项目之后,还是要再回归一遍文档,读起来是会有不同的体悟的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。