React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现。前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作。
React 中的元素引用
正常的组件中,可通过创建对元素的引用来获取到某元素然后进行相应操作。比如元素加载后将焦点定位到输入框。
class App extends Component {
constructor(props){
super(props);
this.inputRef = React.createRef();
}
componentDidMount(){
this.inputRef.current.focus()
}
render() {
return (
<div className="App">
<input type="text" ref={this.inputRef}/>
</div>
);
}
}
创建对元素的引用是通过 React.createRef() 方法完成的。使用的时候,通过其返回对象身上的 current 属性可访问到绑定引用的元素。
React 内部对引用的 current 赋值更新发生在 componentDidMount 或 componentDidUpdate 生命周期之前,即存在使用的时候引用未初始化完成的情况,所以 current 不一定有值。好的做法是使用前先判空。
if(this.inputRef.current){
this.inputRef.current.focus()
}
在上面的示例中,之所以不用判空是因为我们在 componentDidMount 生命周期中使用,此时元素已经加载到页面,所以可以放心使用。
组件中引用的传递
对于原生 DOM 元素可以像上面那样创建引用,但对于自己写的组件,则需要使用 forwardRef() 来实现。
假如你写了个按钮组件,想要实现像上面那样,让使用者可通过传递一个 ref 属性来获取到组件中原生的这个 <button> 元素以进行相应的操作。
button.jsx
const FancyInput = props => <input type="text" className="fancy-input" />;
添加 ref 支持后的按钮组件:
button.jsx
const FancyInput = React.forwardRef((props, ref) => {
return <input type="text" ref={ref} className="fancy-input" />;
});
forwardRef 接收一个函数,函数的入参中第一个是组件的 props,第二个便是外部传递进来的 ref 引用。通过将这个引用在组件中绑定到相应的原生 DOM 元素上,实现了外部直接引用到组件内部元素的目的,所以叫 forwardRef (传递引用)。
使用上面创建的 FancyInput ,在组件加载后使其获得焦点:
class App extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
if (this.inputRef.current) {
this.inputRef.current.focus();
}
}
render() {
return (
<div className="App">
- <input type="text" ref={this.inputRef}/>
+ <FancyInput ref={this.inputRef} />
</div>
);
}
}
TypeScript 中传递引用
先看正常情况下,对原生 DOM 元素的引用。还是上面的示例:
class App extends Component<{}, {}> {
private inputRef = React.createRef();
componentDidMount() {
/**
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- JS 中没有按地址(引用)传递,只有按值传递
很多人,包括我,受书本知识消化不彻底的影响,认为 JS 中参数有两种传递方式:数字.字符串等按值传递:数组.对象等按地址(引用)传递.对此种观点,我们要谨慎. var v1 = [] var v2 = ...
- React createRef:引用
一 代码 import React, { Component } from 'react'; class Box extends Component { render() { return <b ...
- delphi的一些语法知识 以及参数传递问题,按引用方式传递参数,按值方式传递参数
//delphi中exit,abort,break,continue 的区别 exit: 退出函数体abort: 遇到异常,安静处理,就是不显示不提示break: 退出当前循环体,包括for ,whi ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- python序列元素引用容易出错的地方
python序列分列表和元组,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可.举个简单的例子,a1是一个元组,a2是一个列表 ...
- Swift 关键字 inout - 让值类型以引用方式传递
两种参数传递方式 值类型 传递的是参数的一个副本,这样在调用参数的过程中不会影响原始数据. 引用类型 把参数本身引用(内存地址)传递过去,在调用的过程会影响原始数据. 在 Swift 众多数据类型中, ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
随机推荐
- FOF 全面科普贴(转载)
看过那么多 FOF 科普贴,这份最全面!告转之~ 来自:https://xueqiu.com/7692591808/81852994 [ 导言 ] 看过那么多FOF科普贴,这份最全面! 昨天下午,青果 ...
- leetcode-判断回文数,非字符串算法(java实现)
link: https://leetcode-cn.com/problems/palindrome-number/description/ 问题: 判断一个整数是否是回文数.回文数是指正序(从左向右) ...
- Navicat永久激活步骤,激活工具,解决注册码无效的问题
Navicat for MySQL是一套管理和开发MySQL或MariaDB的理想解决方案,支持单一程序,可同时连接到MySQL和MariaDB.这个功能齐备的前端软件为数据库管理.开发和维护提供了直 ...
- TensorFlow图像处理API
TensorFlow提供了一些常用的图像处理接口,可以让我们方便的对图像数据进行操作,以下首先给出一段显示原始图片的代码,然后在此基础上,实践TensorFlow的不同API. 显示原始图片 impo ...
- Qt5.7 实现Https 认证全过程解析(亲自动手版)
#### NetworkRequestManager.h #include <QSsl>#include <QSslKey>#include <QSslSocket> ...
- centOS7虚拟环境搭建
今天来记录一下使用WMware虚拟机来搭建centOS虚拟机的过程. 本次使用工具为VMware Workstation 14 Pro,可以从https://www.vmware.com/来获取所需工 ...
- django相关网站
记录django的学习笔记:http://www.cnblogs.com/qwj-sysu/tag/django/ uwsgi的文档:http://uwsgi-docs.readthedocs.io/ ...
- windows开发的python移植到linux的问题
2016年1月28日 这个问题已经自己解决 file-setting下 左侧code style line separator下拉选择unix就可以了 我在windows上开发的python想移 ...
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- city-picker插件使用-移动h5三级联动
首先访问该链接:http://www.jq22.com/jquery-info12914 看看是否是你要找的三级联动插件,(主要看注释的部分!) 好了,不知道是不是我傻,没有找到初始化数据的方法,本人 ...
|