React中Ref 的使用方法详解


Posted in Javascript onApril 28, 2020

本文实例讲述了React中Ref 的使用方法。分享给大家供大家参考,具体如下:

React中Ref 的使用 React v16.6.3

在典型的React数据流中,props是父组件与其子组件交互的唯一方式。要修改子项,请使用new props 重新呈现它。但是,在某些情况下,需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例,也可以是DOM元素。对于这两种情况,React都提供了api。

何时使用refs

refs有一些很好的用例:

  • 1.文本选择或媒体播放。
  • 2.触发势在必行的动画。
  • 3.与第三方DOM库集成。

避免将refs用于可以声明性地完成的任何操作。

*不要过度使用Refs

旧版API:字符串引用

如果您之前使用过React,那么您可能熟悉一个旧的API,其中ref属性是一个字符串"textInput",并且DOM节点被访问为this.refs.textInput。建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除。

回调引用

当组件安装时,React将使用DOM元素调用ref回调,并在卸载时调用null。

在componentDidMount或componentDidUpdate触发之前,Refs保证是最新的.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 render() {
 // Use the `ref` callback to store a reference to the text input DOM
 // element in an instance field (for example, this.textInput).
 return (
  <div>
  <input
   type="text"
   ref={this.setTextInputRef}
  />
  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

refs例子--点击获取input焦点

class Example extends React.Component {
 handleClick() {
 // 使用原生的 DOM API 获取焦点
 this.refs.myInput.focus
 ();
 }
 render() {
 // 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
 return (
  <div>
  <input type="text" ref="myInput" />
  <input
   type="button"
   value="点我输入框获取焦点"
   onClick={this.handleClick.bind(this)}
  />
  </div>
 );
 }
}

使用React.createRef()

React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React,我们建议您使用回调引用。

创建React.createRef()

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

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 }
 render() {
 return <div ref={this.myRef} />;
 }
}

访问ref

当ref被传递给元素时render,对该节点的引用变得可以在currentref 的属性处访问

const node = this.myRef.current;

ref的值根据节点的类型而有所不同

  • 当在refHTML元素上使用该属性时,ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
  • 在ref自定义类组件上使用该属性时,该ref对象将接收组件的已安装实例作为其current。

您可能无法ref在函数组件上使用该属性,因为它们没有实例。

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);
 // create a ref to store the textInput DOM element
 this.textInput = React.createRef();
 this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
 // Explicitly focus the text input using the raw DOM API
 // Note: we're accessing "current" to get the DOM node
 this.textInput.current.focus();
 }

 render() {
 // tell React that we want to associate the <input> ref
 // with the `textInput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textInput} />

  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

current当组件安装时,React将为该属性分配DOM元素,并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。

无法在函数组件上使用ref属性

function MyFunctionComponent() {
 return <input />;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  <MyFunctionComponent ref={this.textInput} />
 );
 }
}

**如果需要引用它,则应该将组件转换为类,就像您需要生命周期方法或状态时一样。
但是,只要引用DOM元素或类组件,就可以在函数组件中使用该ref属性:**

function CustomTextInput(props) {
 // textInput must be declared here so the ref can refer to it
 let textInput = React.createRef();

 function handleClick() {
 textInput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textInput} />

  <input
  type="button"
  value="Focus the text input"
  onClick={handleClick}
  />
 </div>
 );
}

将DOM引用公开给父组件

在极少数情况下,可能希望从父组件访问子节点的DOM节点。通常不建议这样做,因为它会破坏组件封装,但它偶尔可用于触发焦点或测量子DOM节点的大小或位置。

虽然可以向子组件添加引用,但这不是一个理想的解决方案,因为只能获得组件实例而不是DOM节点。此外,这不适用于功能组件。

如果使用React 16.3或更高版本,我们建议在这些情况下使用ref forwarding。引用转发允许组件选择将任何子组件的引用公开为自己的组件。可以在ref转发文档中找到有关如何将子DOM节点公开给父组件的详细示例。

如果您使用React 16.2或更低版本,或者您需要比ref转发提供的更多灵活性,您可以使用此替代方法并明确地将ref作为不同名称的prop传递。

如果可能,建议不要暴露DOM节点,但它可以是一个有用的逃生舱。请注意,此方法要求向子组件添加一些代码。如果您完全无法控制子组件实现,则最后一个选项是使用findDOMNode(),但不鼓励使用它StrictMode。

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
javascript包装对象实例分析
Mar 27 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 #Javascript
react PropTypes校验传递的值操作示例
Apr 28 #Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 #Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
You might like
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
python跨文件使用全局变量的实现
2020/11/17 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
详解python的变量缓存机制
2021/01/24 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
给医务人员表扬信
2014/01/12 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
协议书与合同的区别
2014/04/18 职场文书
领导欢迎词致辞
2015/01/23 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
详解Python函数print用法
2021/06/18 Python
基于Redission的分布式锁实战
2022/08/14 Redis