ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Refs and the DOM

2022-07-06 10:35:20  阅读:160  来源: 互联网

标签:DOM Refs React 组件 ref 属性


是什么?

Refs 提供一种方式允许访问DOM节点或在render方法中创建的React元素。

为什么?

典型的React数据流中,props是父组件与子组件交互的唯一方式。修改一个子组件,需要使用新的props来重新渲染,但是某些情况下,需要在典型的数据流之外强制修改子组件。被修改的子组件可能是一个React组件的实例,也可能是一个DOM元素。

怎么做?

下面几个适合使用refs的情况:

  • 管理焦点,文本选择或媒体播放
  • 触发强制动画
  • 集成第三方DOM库

避免使用refs来做任何可以通过声明式实现来完成的事情。

例子  避免在Dialog组件里暴露open()和close()方法,最好传递isOpen属性

创建Refs

Refs是使用React.createRef()创建的,并通过ref属性附加到React元素。在构造组件时,通常将Refs分配给实例属性,以便可以在整个组件中引用。

访问Refs

ref被传递给render中的元素时,对该节点的引用可以在ref的current属性中被访问

ref属性用于html元素时,构造函数中使用React.createRef()创建的ref接受底层DOM元素作为current属性

用于自定义class组件时,ref对象接收组件的挂载实例作为其current属性

不能在函数组件上使用ref属性

 

将DOM Refs 暴露给父组件

在极少数情况下,可能希望在父组件中引用子节点的DOM节点

Ref转发使组件可以像暴露自己的ref一样暴露子组件的ref

Ref转发是一个可选特性,其允许某些组件接收ref,并将其向下传递给子组件

 

标签:DOM,Refs,React,组件,ref,属性
来源: https://www.cnblogs.com/baller-coder/p/16449753.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有