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. 【转】46 个非常有用的 PHP 代码片段

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...

  2. numpy用法介绍-未完待续

    简介 NumPy(Numerical Python简称) 是高性能科学计算和数据分析的基础包 为什么使用? 标准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元 ...

  3. Retrofit 抽象工厂模式

    https://blog.csdn.net/h176nhx7/article/details/78139371

  4. Android Studio设置代码风格

    进入settings,然后搜索CodeStyle选择Java进入如下界面 scheme选择project

  5. PHP discuz模板语法

    Discuz! X 模板的解析主要是 ./source/class/class_template.php 文件解析处理的,如果需要深入了解请可以看看这个文件! 模板嵌套语法 将被嵌套模板内容解析为 P ...

  6. ArrayList排序Sort()方法(转)

    //使用Sort方法,可以对集合中的元素进行排序.Sort有三种重载方法,声明代码如下所//示. public void Sort(); //使用集合元素的比较方式进行排序 public void S ...

  7. Oracle案例02——ORA-12034: "SCOTT"."USER_TABLE" 上的实体化视图日志比上次刷新后的内容新

    最近同事在交接工作时,发现有几个schedule job没有执行成功,我这边给看了下,其中一个是由于数据库迁移,调用dblink的host主机IP在tnsnames中没有变更导致,还有一个是无法视图的 ...

  8. Linux入门-1 常用命令

    写在前面 当年初学Linux的时候,在网上找到nash_su大神的一套视频,讲的特别好,基础部分看了好几遍,很多知识点让我受益至今. 十分庆幸当年的选择,也十分感谢nash_su大神,祝你事事顺心,每 ...

  9. Heka配置讲解

    基于Heka,ElasticSearch和Kibana的分布式后端日志架构 目前主流的后端日志都采用的标准的elk模式(Elasticsearch,Logstash,Kinaba),分别负责日志存储, ...

  10. mongoDB 创建数据库、删除数据库

    创建数据库 use 命令 MongoDB 用 use + 数据库名称 的方式来创建数据库.use 会创建一个新的数据库,如果该数据库存在,则返回这个数据库. 语法格式 use 语句的基本格式如下: u ...