React createRef:引用
一 代码
import React, { Component } from 'react'; class Box extends Component {
render() {
return <button>你好</button>;
}
} export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef(); // 将引用对象设置为父组件的成员
this.boxRef = React.createRef(); // 将引用对象设置为父组件的成员
} render() {
return <div>
{/* ref属性设置在DOM组件上,current指向html元素 */}
<input type="text" ref={this.inputRef} />
{/* ref属性设置在普通组件上,current指向普通组件 */}
<Box ref={this.boxRef}/>
</div>
} componentDidMount() {
console.log(this.inputRef); // {current: input}
console.log(this.inputRef.current); // <input type="text">
console.log(this.inputRef.current instanceof HTMLInputElement); // true
this.inputRef.current.focus(); // 操作子组件
console.log(this.boxRef); // {current: Box}
console.log(this.boxRef.current); // Box
console.log(this.boxRef.current instanceof React.Component); // true
}
}
二 原理
React.createRef函数会创建一个引用对象(只有一个current属性)。
// react安装包中的react.development.js
// an immutable object with a single mutable(易变的) value
function createRef() {
var refObject = {
current: null
};
{
Object.seal(refObject); // 将对象密封(不能增删属性、配置属性,但可以给属性赋值)
}
return refObject;
}
子组件创建完成后,会检测其html标签中的ref属性,并做相应的处理。
html标签中的key属性、ref属性,会被React特殊处理,不会出现在props属性中!
// react-dom安装包中的react-dom.development.js function commitAttachRef(finishedWork) {
var ref = finishedWork.ref;
if (ref !== null) {
var instance = finishedWork.stateNode;
var instanceToUse = void 0;
switch (finishedWork.tag) {
case HostComponent: // 原生html标签
// 原样返回:function getPublicInstance(instance) {return instance;}
instanceToUse = getPublicInstance(instance);
break;
default:
instanceToUse = instance; // React组件
}
if (typeof ref === 'function') { // ref是函数
ref(instanceToUse); // 执行
} else { // ref是引用对象
{
if (!ref.hasOwnProperty('current')) {
warningWithoutStack$1(
false,
'Unexpected ref object provided for %s. '
+ 'Use either a ref-setter function or React.createRef().%s',
getComponentName(finishedWork.type), getStackByFiberInDevAndProd(finishedWork));
}
} ref.current = instanceToUse; // 设置引用对象的current属性
}
}
}
引用对象是父组件的成员,于是父组件可以通过引用对象操作子组件。
React createRef:引用的更多相关文章
- React.createRef()
概述: 引用(Refs)提供了一个获得DOM节点或者创建在render方法中的React元素的方法: 在典型的React数据流中,props是唯一的父组件与它们的子元素的通信方式.更改子元素,你需要使 ...
- React的React.createRef()/forwardRef()源码解析(三)
1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...
- react之引用echarts
react之引用echarts npm: npm install echarts --save 代码: import React, { Component } from 'react'; // 引入 ...
- React中引用CSS样式的方法
相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...
- react.js 引用 NavBar 报错svg-spite-loader
Navbar iconName="false" 配置 改为 iconName={this.props.bool}
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- React forwardRef:跳转引用
一 在DOM组件中使用 import React, { Component } from 'react'; // 跳转引用对象本身并不关心ref,而是由渲染函数转发ref const FancyBut ...
- [React] Reference a node using createRef() in React 16.3
In this lesson, we look at where we came from with refs in React. Starting with the deprecated strin ...
- react中的DOM操作
前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...
随机推荐
- 工作中 sql 整理(一)
这篇文章记录关于SQL的内容,有些凌乱,是工作中点滴的积累,只能按照时间顺序,逐次记录. 一.update 关联更新 1.需求 Table A TableB A表中的主键和B表中的主键相关联,关联 ...
- Yii2中多表关联查询(hasOne、hasMany、join、joinwith)
表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name customer_id ...
- tomcat接口调用时延开关
项目中有些页面时延不稳定,需要看每次接口调用时延,怎么看,有两种方法:一种是直接去catalina.out日志中看,一种是直接去localhost_access_log日志中看,第一种需要在代码中实现 ...
- 解压zipfile & tarfile
def __un_zip(self, file_path): """解压.zip格式文件到同名目录下,若解压之前就存在该目录说明已解压,跳过解压过程,返回该目录" ...
- node压缩文件夹
前几天遇到一个需求,将一个10G的文件夹打包压缩,并去除黑名单上的文件. node自带的只能压缩文件.网上看了集中方案要么对大文件操作不行,要么只能直接操作文件夹,无法对文件夹遍历筛选. 后来确定使用 ...
- TCP/IP学习20180629-数据链路层-ARP、IP
1.数据链路层:IP.ARP.RARPARP协议用来找到目标主机的Ethernet网卡Mac地址,IP协议用来承载数据ARP协议找到目标,IP协议传输数据2.IP协议ip协议是TCP/IP协议的核心, ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- 创建一个HTTP接口测试
jmeter Apache JMeter是Apache组织开发的基于Java的压力测试工具. Apache jmeter 可以用于对静态的和动态的资源(文件,Servlet,Perl脚本,java 对 ...
- eclipse各版本及下载
附:Eclipse各个版本简介(http://zh.wikipedia.org/wiki/Eclipse) eclipse下载地址: https://www.eclipse.org/官网--右上角的I ...
- 从Tomcat的处理web请求分析Java的内存模型
Tomcat作为一个java应用,同样是有主线程和子线程的.主线使用while(true)的方式一直循环,等待客户端来连接.一个客户端来了之后,就从线程池中拿一个线程来处理请求,如果没有配置线程池,就 ...