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 { ...
随机推荐
- unity3d之技能栏冷却
绑定在按钮上的脚本 using UnityEngine; using System.Collections; using UnityEngine.UI; public class CdCover : ...
- asp.net 、C#实现微信企业号OAuth2认证
以微信企业号作为入口的应用,几乎都会遇到需要应用系统中个人信息和微信用户关联问题.从而进行其他业务处理.目前所做项目采取在企业号通讯录添加自定义字段存入应用系统用户信息表中唯一标识UserGuid进行 ...
- vim lua对齐indent无效
查了半天,打开命令 :filetype一看是关闭的 filetype detection:ON plugin:ON indent:OFF 在vimrc里打开 filetype indent on ...
- python文件操作各种模式和常用方法总结r r+ rb r+b
1.读,r r+ rb r+b read() 全部读取 read(n) 读取一部分 r模式下:n 个字符. rb模式下:n个 字节. readline() 按行读取. readlines() 返回个列 ...
- BZOJ2882: 工艺(后缀数组)
题意 题目链接 Sol 直接把序列复制一遍 后缀数组即可 在前\(N\)个位置中取\(rak\)最小的输出 #include<bits/stdc++.h> using namespace ...
- html+css模仿的锤子官方首页
<div id="wrapper"> <header> <div class="container"> <h1> ...
- JavaWeb中Servlet和JSP的分工案例
jsp和Servlet的分工: * JSP: > 作为请求发起页面,例如显示表单.超链接. > 作为请求结束页面,例如显示数据. * Servlet: &g ...
- Jave 之方法-函数(5)
如何定义Java中的方法: 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. (方法在C语言中被称为函数) 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法允许被访问 ...
- 浅谈回归(二)——Regression 之历史错误翻译
我很好奇这个问题,于是搜了一下.我发现 Regression 这个词 本意里有"衰退"的意思. 词根词缀: re- 回 , 向后 + -gress- 步 , 级 + -ion 名词 ...
- Linux Firefox Adobe Flash Player 安装和更新
1.下载 Firefox Adobe Flash Player 使用Linux上的火狐浏览器访问如下的下载网址: https://get.adobe.com/flashplayer/ 选择下载 &qu ...