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 { ...
随机推荐
- react-native一些好的组件
一.移动端路由 react-navigator 二.移动端本地储存 react-native-storage(https://github.com/sunnylqm/react-native-stor ...
- is not mapped 错误改正
我出现的错误是:oorg.hibernate.hql.ast.QuerySyntaxException: DEPT is not mapped [from DEPT] 配置文件如下: <?xml ...
- 洛谷P1600 天天爱跑步(差分 LCA 桶)
题意 题目链接 Sol 一步一步的来考虑 \(25 \%\):直接\(O(nm)\)的暴力 链的情况:维护两个差分数组,分别表示从左向右和从右向左的贡献, \(S_i = 1\):统计每个点的子树内有 ...
- MySQL库表详细操作
昨天我们初始了MySQL,今天我们先从库表方面详细说一下具体操作 一.库操作 1.创建数据库 1.1 语法 CREATE DATABASE 数据库名 charset utf8; 1.2 数据库命名规则 ...
- Spring 框架(二)
1AOP 1.1 AOP介绍 1.1.1 什么是AOP l 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功 ...
- Android PopupWindow显示位置设置
当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的那样,会发 生错位的情况,尤其是不同尺寸的平板上,那错位错的不是一般的不 ...
- Git学习-Git配置(一)
零.前言 Git是一个工具,就没必要把时间浪费在那些"高级"但几乎永远不会用到的命令上.一旦你真的非用不可了,到时候再自行Google或者请教专家也未迟. 如果你是一个开发人员,想 ...
- klee源码阅读笔记1--STPBuilder类
初始化过程中四个数据成员中的两个数据成员被初始化: 一.vc被初始化为STP提供的C调用接口函数vc_createValidityChecker(): 二.optimizeDivides被初始化为fa ...
- 用C语言指针作为函数返回值
转载:http://c.biancheng.net/cpp/html/3242.html C语言允许函数的返回值是一个指针(地址),我们将这样的函数称为指针函数.下面的例子定义了一个函数 strlon ...
- *p++、*++p、(*p)++区别
关于数组指针的谜题 假设 p 是指向数组 arr 中第 n 个元素的指针,那么 *p++.*++p.(*p)++ 分别是什么意思呢? *p++ 等价于 *(p++),表示先取得第 n 个元素的值,再将 ...