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的更多相关文章

  1. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

  2. 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 ...

  3. (转)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 报错 ...

  4. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  5. React之ref详细用法

    在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在reac ...

  6. React之ref

    作为响应式开发框架React,我们知道他是数据驱动的,但有时候避免不了还是得动用到DOM操作,这个时候我们就可以用到ref:用法如下: 然后这样做有个弊端,当一个 ul 下面的 li 是动态添加的时候 ...

  7. React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...

  8. React Native ref高级用法&&setNativeProps使用

    ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...

  9. React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式

    import React, { Component } from "react" export default class MyInput extends Component { ...

随机推荐

  1. python logging的应用

    #-*-coding:utf-8-*-#util import logging import logging from logging.handlers import RotatingFileHand ...

  2. css-flex布局知识梳理

    一.传统的布局 布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 二. Flex的 ...

  3. js原生获取css属性

    原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...

  4. C语言实现整数数组的逆置算法

    读入100个整数到一个数组中,写出实现该数组进行逆置的算法. 方法一: 假设100个整数读入到数组a中,算法f1的思想是分别从数组两端依次将对应数进行交换,即a[i]与a[100 - i - 1]进行 ...

  5. 二十一、如何导入svg图片

    svg就相当于字体,如何将生成的svg导入到自己的项目中去呢? 1.将类似下面的文件放入自己的项目中: 2.生成的svg中有一个style.css文件,将里面的内容拷贝到你的css中,然后更改上图的路 ...

  6. WebService性能测试

    什么是WebService?(本文也会在最下面通俗的介绍) 这里给一个站内大哥的讲解:http://www.cnblogs.com/Leo_wl/archive/2010/05/20/1740205. ...

  7. C# GDI+ 利用 Rectangle GraphicsPath 判断 矩形或多边形 图形关系

    最近在做一些简单的图像对比工作,总结了一些GDI+对象的使用方式,记录下来共享给大家使用. 判断Rectangl与多边形的关系 /// <summary> /// 是否包含输入范围 /// ...

  8. Echarts实现隐藏x轴,y轴,刻度线,网格

    "yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "boundaryGap" ...

  9. mongodb使用mongos链接复制集

    我们知道mongodb现在生产环境大部分还是使用的复制集来作为主流,据我了解.很多公司现在都是使用复制集的方式,而我们通过mongos可以巧妙的解决链接的问题,我们先从环境说起: 首先我们要模仿搭建的 ...

  10. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...