React Ref 和 React forwardRef
2024-09-01 12:04:07
Ref 和Dom,Ref是reference(引用)的简写。
- 能力:大多数情况下,props前递可以解决一切问题,但是依然有需要触达React实例或者Dom节点的情况,这时候应该使用React Ref。
- 使用:
- 用来处理立即执行的动画。
- 用来处理非受控组件的焦点,什么是受控/非受控组件参考文章。
- 用来与第三方库对接,我知道的有d3 或者 cocos。
React.forwardRef((props,ref)=><Compnent>)
- 简而言之就是自动透传引用(Ref),能让组件接收传过来的ref, 向下(或者说向前)传递Ref。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
)); // You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>; 上述代码的解释:
- 首先创建了一个ref, 这个ref的目的就是抓到孙子组件中的input节点
- 通过组件属性把ref传给子组件<FancyButton>
- 子组件通过React.forwardRef透传props和ref,这里ref才是我们要注意的点。
- 参数ref赋值给孙子组件<button>
- 这个ref就能抓到孙子组件的实例。
- 简而言之就是自动透传引用(Ref),能让组件接收传过来的ref, 向下(或者说向前)传递Ref。
React.forwardRef((props, ref)=><Componnet>)在高阶组件中的使用:
- 比如我们写一个打印前后属性的高阶组件logProps,这个高阶组件能够透传ref
1 function logProps(Component) {
2 class LogProps extends React.Component {
3 componentDidUpdate(prevProps) {
4 console.log('old props:', prevProps);
5 console.log('new props:', this.props);
6 }
7
8 render() {
9 const {forwardedRef, ...rest} = this.props;
11 // 把常规属性"forwardedRef"作为ref赋值给传过来的Component组件
12 return <Component ref={forwardedRef} {...rest} />;
13 }
14 }
15
16 // 注意React.forwardRef提供的第二个参数ref.
17 // 我们可以把ref作为一个常规属性"forwardedRef"传给LogProps这个组件
18 // 就可以跟实例绑定.
19 return React.forwardRef((props, ref) => {
20 return <LogProps {...props} forwardedRef={ref} />;
21 });
22 }
- 比如我们写一个打印前后属性的高阶组件logProps,这个高阶组件能够透传ref
最新文章
- ArcGIS 10与ArcEngine 10安装及破解
- WebClient 访问https
- (转)Qt Model/View 学习笔记 (一)——Qt Model/View模式简介
- C#中关键字ref与out的区别【转】
- 《think in python》学习-4
- innobackup增量备份与恢复
- 项目经理的“时间管理法则”(内含10G项目管理书籍)
- 用于模拟百度分享的errno错误代码
- LeetCode练习2 两数相加
- 【mmall】url-pattern配置为";/";和";/*";的区别
- Git使用三:git的使用流程
- Oracle下SQL学习笔记
- LeetCode--437--路径总和3
- JavaWeb:c3p0配置问题java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector
- shell脚本实例-shell 分析系统瓶颈脚本
- 2.10 select下拉框
- WEB常用前端开发调试工具介绍
- oracle中sequence(自增序号)的用法
- js原生语法实现表格操作
- UML实践详细经典教程
热门文章
- python的pywinrm模块远程连接windows执行dos命令
- HNU_小中初数学学习软件(可视化编程)_结对项目总结与体会
- Scrapy项目 - 数据简析 - 实现腾讯网站社会招聘信息爬取的爬虫设计
- Circular RNA的产生机制、功能及RNA-seq数据鉴定方法
- 【ADO.NET基础】后台获取前台控件
- java几个常见的基础错误
- C++——多文件结构和编译预处理命令
- vue2.0项目记住密码和用户名实例
- spark针对web日志正则匹配
- Spark 学习笔记之 Streaming和Kafka Direct