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 { ...
随机推荐
- eclipse切换workspace后配置问题
正常情况下如果切换了eclipse的workspace后,需要重新配置eclipse,但是可以将原工作目录中的.metadata/.plugins/org.eclipse.core.runtime拷贝 ...
- 利用setTimeoutc处理javascript ajax请求超时
用过jquery的人都知道里面的$.ajax能设置超时处理及各种错误的抛出,确实好用.原生的js没有对应的方法,还得写各种兼容.在实际运用中,不管请求是否成功都应该做容错处理, 不然用户不知道到底发生 ...
- 前端面试经典题目合集(HTML+CSS)一
1.说说你对HTML语义化的理解? (1)什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. ( ...
- QQ 聊天机器人小薇发布!
简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息,发现有"感兴趣"的内容时通过图灵机器人进行智能回复 监 ...
- dom操作排他思想
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Goclipse的Eclipse插件包安装升级地址
http://goclipse.github.io/releases/ Eclipse Software Site for Goclipse This URL is an Eclipse softwa ...
- 基于以太坊的Token开发步骤
Token开发步骤 一.准备工具1.安装以太坊brew tap ethereum/ethereumbrew install ethereum2.node:brew install nodejs3.安装 ...
- js结构化命名的思考
var koooke ={androidShare:{ show : function() {alert(1000)}}};koooke.androidShare.show(); 以上JS是偶然缩写. ...
- yii 只查询指定字段
$cri = new CDBcriteria(); $cri->addCondition( ' hid = '.$hid.' ' ); $cri->select = 'id,propert ...
- tpcc-mysql安装测试与使用生成对比图
1:下载tpcc-mysql的压缩包,从下面的网站进行下载 https://github.com/Percona-Lab/tpcc-mysql 也可直接从叶总博客直接下载: http://imysql ...