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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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 进度条实现代码
2009/03/10 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP URL路由类实例
2013/11/12 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
python解析xml文件实例分享
2013/12/04 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python 定时修改数据库的示例代码
2018/04/08 Python
python 实现UTC时间加减的方法
2018/12/31 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python3获取cookie常用三种方案
2020/10/05 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python