react判断数据格式(详解Ref在React中的交叉用法)
类别:编程学习 浏览量:2421
时间:2022-01-14 02:29:09 react判断数据格式
详解Ref在React中的交叉用法目录
- 一、首先说明下什么是Ref
- 二、ref在hooks中的用法
- 1、ref在hooks中HTMLDom的用法
- 2、ref在hooks中与函数式组件的用法
- 3、ref在hooks中与类组件一同使用
- 4、ref在hooks中与class、react-redux一同使用
Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说,这通常不是必需的。但其对某些组件,尤其是可重用的组件库是很有用的
Ref官网说明:点击这里
二、ref在hooks中的用法1、ref在hooks中HTMLDom的用法
这里就如官网一样正常使用即可,官网例子:这里
const Fn = ()=>{ const testRef = useRef(null); console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<li>测试</li> return ( <li ref={testRef}>测试</li> ) }
2、ref在hooks中与函数式组件的用法
这里只需要将ref属性透传到函数式组件中即可
const Fn = ()=>{ const testRef = useRef(null); // 定义Test函数组件 const Test = ({ refs }) => <li ref={refs}>我是ReactDOM test</li>; console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是ReactDOM test</li> return ( {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */} <Test refs={testRef} /> ) }
3、ref在hooks中与类组件一同使用
这里仅需要在类组件的回调ref中手动赋值给useRef对象即可,更多回调ref:这里
import ReactDom from 'react-dom'; const Fn = ()=>{ const testClassRef = useRef(null); // 定义TestClass类组件 class TestClass extends React.Component { render() { return ( <li > 我是TestClass类组件 测试 </li> ) } } console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是TestClass类组件 测试</li> return ( {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */} <TestClass ref={el => { console.log('new render refs') testClassRef.current = ReactDom.findDOMNode(el); }} /> ) }
4、ref在hooks中与class、react-redux一同使用
当遇到connect包裹的类组件时,因为最外层已经被包裹成了react-redux的Provider,所以需要将ref属性透传如真正React组件中,这个时候需要关注下connect的forwardRef属性
import ReactDom from 'react-dom'; import { connect } from 'react-redux'; const Fn = ()=>{ const testClassRef = useRef(null); // 定义TestClass类组件 class TestClass extends React.Component { render() { return ( <li > 我是TestClass类组件 测试 </li> ) } } //定义TestClass的connect包裹后的组件 //forwardRef:true 设置redux允许将ref作为props传入到connect包裹的组件中 const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass); console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是TestClass类组件 测试</li> return ( {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */} <TestClassConnect ref={el => { console.log('new render refs') testClassRef.current = ReactDom.findDOMNode(el); }} /> ) }
以上就是详解Ref在React中的交叉用法的详细内容,更多关于Ref在React中的交叉用法的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- webkit倒影方法(巧用 -webkit-box-reflect 倒影实现各类动效小结)
- react基础知识详解(如何深入理解React的ref 属性)
- vmwareftp怎么用(Windows Azure VM上配置FTP服务器)
- ref和out区别有哪些
- react循环有几种方法(React forwardRef的使用方法及注意点)
- C#中==、Equals、ReferenceEquals的区别
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- 颜色识别模块抓取物体(Referer原理与图片防盗链实现方法详解)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- react的基本知识(React中refs的一些常见用法汇总)
- react判断数据格式(详解Ref在React中的交叉用法)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- a标签的href与onclick
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
热门推荐
- sqlserver设置自动备份的注意事项(SQL server 定时自动备份数据库的图文方法)
- 阿里云服务器应该买哪个(阿里云服务器购买时面对众多地域,该如何选择)
- cssdiv边框外发光怎么设置(DIV+CSS实现带三角箭头的提示框)
- docker网络有哪些模式(Docker网络原理及自定义网络详细解析)
- 腾讯云换php版本(腾讯云服务器配置php环境的方法)
- 织梦网站栏目管理和内容发布(使用DEDE织梦计划任务功能定时更新首页)
- mysql数据库简单操作(一篇文章教会你进行MySQL数据库和数据表的基本操作)
- dedecms安全设置(织梦系统DedeCMS设定栏目及文档权限登录后跳转到登陆前的页面的实现方法)
- dedecms怎么添加alt标签(dedecms 取消栏目列表页文章标题设置推荐后的加粗)
- mysql中delete聚合函数查询值(MySQL 分组查询和聚合函数)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9