react 之 ref
react提供一个refs的安全口,做到‘接触’或调用 从render()返回的组件实例的方法、DOM节点。
用法:1. ref Callback属性
ref 属性可以是一个回调函数,此函数会在这个组件被挂载后立即执行,此回调函数的参数就是当前这个组件或DOM节点,回调函数体内可以立即使用这个组件,或保存供以后使用;
render(){
return(
<Textinput ref={(c)=>{
if(c != null)c.focus(); // 立即使用
}}/>)
};
==================
render(){
return(<input ref={(c)=>this._c = c}/>) //保存
}
componentDidMount(){
this._c.focus(); //调用
}
注:当被引用的组件卸载和每当ref变动,旧的ref将会被以null做参数调用。这阻止了在实例被保存的情况下的内存泄露。
用法2:ref String属性
ref 同样支持使用字符串的形式作为一个组件的ref prop:
<input ref="myInput"/> 访问用 this.refs.myInput.value 或 this.refs['myInput'](此方法为保留Google Closure Compiler advanced-mode crushing resilience)。
注:1.决不再组件的render()方法中访问refs。
2.refs不能连接到一个stateless fuanction,因为无状态组件不支持组件实例,没有生命周期。
react 之 ref的更多相关文章
- React中ref的使用方法
React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...
- react 使用 ref 报错 ,[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)
react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 [eslint] Using string literals in ref attributes is d ...
- (转)react 使用 ref 报错 ,[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)
原文地址:https://www.cnblogs.com/gangerdai/p/7396226.html react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 ...
- React中Ref 的使用 React-踩坑记_05
React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...
- React之ref详细用法
在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在reac ...
- React之ref
作为响应式开发框架React,我们知道他是数据驱动的,但有时候避免不了还是得动用到DOM操作,这个时候我们就可以用到ref:用法如下: 然后这样做有个弊端,当一个 ul 下面的 li 是动态添加的时候 ...
- React中ref的用法
在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...
- React Native ref高级用法&&setNativeProps使用
ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...
- React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式
import React, { Component } from "react" export default class MyInput extends Component { ...
随机推荐
- rpm的参数
rpm 包的参数如下: -e 卸载rpm包 -q 查询已安装的软件信息 -i 安装rpm包 -u 升级rpm包 --replacepkgs 重新安装rpm包 --justdb 升级数据库,不修改文 ...
- Heka 的编译
Heka是Mozilla开源的,基于Go语言实现的,插件式log收集和分析系统. 已经编译好的 release 版本可以在下面地址下载: https://github.com/mozilla-serv ...
- javascript获取文件后缀名
javascript获取文件后缀名:在需要验证文件格式的时候,首先就要获得文件的格式,下面是一个通过正则表达式获取文件后缀名的一个简单实例. function validate(){ var impo ...
- 微信小程序中使用wxParse展示HTML内容
wxParse的GitHub地址:https://github.com/icindy/wxParse 一.数据内容: 请求地址:https://m.quanchepin.com/index.php?a ...
- js中常见面试问题-笔记
原文参考https://mp.weixin.qq.com/s/mCVL6qI33XeTg4YGIKt-JQ 1.事件代理给父元素添加事件,利用事件冒泡原理,在根据e.target来获取子元素<u ...
- HADOOP背景介绍
1. HADOOP背景介绍 1.1 什么是HADOOP 1. HADOOP是apache旗下的一套开源软件平台 2. HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分 ...
- 基础架构之Docker私有库
由于项目要容器化,所有搭建自己的镜像库也是很有必要的,不然发到直接使用官方的镜像库,速度绝对能让你头疼,这篇文章就介绍搭建自己的镜像私有库. (一) 环境要求 Centos 7.5.1804 Doc ...
- Ta们,用云计算改变着更多普通人的生活,所以,我们1218
维族音乐的传承者:为家园建设生态农业:为50万货运司机谋福利:电视游戏行业复兴的倡导者:......还有很多平凡普通的人,不同的主角.不同的情节,用自己的云上轨迹在点滴改变着我们的周遭世界.所以,我们 ...
- 怎么区分odd和even
odd [ɒd] 和even ['iːv(ə)n] 一个表示奇数.一个表示偶数 经常混淆. 一个记住的好方法: odd是3个字母,单数,所以表示奇数 even是4个字母,所以表示偶数
- 【Android】移动项目位置
一.前言 有时候,我们新建一个项目后,因为一些原因想要重新移动项目到别的文件夹.然而,移动到新的文件夹后,却发现之前好好的项目运行不了.点击运行后,弹出如下对话框. Installation fai ...