06-组件化高级-ref获取原生DOM3种方式

39 阅读1分钟

为什么用ref

一般来说,在MVVM框架中,我们不需要操作原生DOM,但是在某些特殊场景,需要操作,如以下场景:

  • 操作input的聚焦/不聚焦,媒体播放,文本选择
  • 触发强制动画
  • 继承第三方DOM库

基于以上场景,react通过refs获取DOM

为什么不用document.querySelector?

因为该浏览器API获取的是整个网页DOM树上的 第一个指定选择器 对应的元素

ref操作DOM 3种方式

image.png

方式一:ref="字符串",js中通过this.refs.字符串

  1. DOM元素上增加ref="字符串",js中通过this.refs.字符串 获取
  2. 该方式已经不支持了,会警告

image.png

方式二:createRef 用得最多

  1. 引入createRef
  2. 组件constructor中,增加ref对象
  3. 元素的ref属性绑定该对象
  4. 获取元素,ref对象.current

image.png

image.png

image.png

方式三:ref={el=>doSomthing(el)}

ref传入一个回调函数,参数el就是元素本身,且在渲染时候就会执行

image.png

image.png