react教程,一个自定义的ref获取dom对象的写法
发布于 作者:苏南大叔 来源:程序如此灵动~

苏南大叔在学习别人代码的时候,看到了一个比较奇怪的ref
的写法,和主流教程里面给出了一个不同的答案。实验了一下,貌似也是可以使用的。所以在这里和大家做一个分享。

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述一个另类的ref
的写法。测试环境:create-react-app@5.0.1
,react@18.2.0
,react-dom@18.2.0
,node@16.14.2
。
前文回顾
在前面的文章里面,苏南大叔写过一篇在react
里面使用ref
的文章,分别是:
- https://newsn.net/say/react-createref.html
- https://newsn.net/say/react-useref.html
- https://newsn.net/say/react-ref.html
本文中,实践了一个新的写法。范例代码如下:
核心代码是:
这里创建的变量this.nodeRefFake
就相当于传统的ref.current
。目前来看,使用起来是一样的。
类式组件
测试代码如下:


函数式组件
测试代码:
结果看起来,也是和原来使用useRef()
创建的ref.current
一样的效果。


结束语
就是为了写这个链接而准备的文字,react
经验文章,链接如下:


