[React] Forward a DOM reference to another Component using forwardRef in React 16.3
The function forwardRef
allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid unexpected ref behaviour. The technique of forwarding refs really starts to shine in combination with higher order components (HOCs).
forwardRef should be used when you are using HOC and pasing the ref around from parent to child component.
parent component:
import React, { Component } from "react";
import TextInput from "./TextInput"; class App extends Component {
inputRef = React.createRef(); focusInput = () => {
this.inputRef.current.focus();
}; render() {
return (
<React.Fragment>
<TextInput inputRef={this.inputRef} />
<button onClick={this.focusInput}>Focus</button>
</React.Fragment>
);
}
} export default App;
child commponent:
import React, { Component, Fragment } from "react";
import logProps from "./logProps"; class TextInput extends Component {
render() {
return <input ref={this.props.inputRef} />;
}
} export default logProps(TextInput);
HOC componnet:
import React, { Component } from "react"; function logProps(Component) {
class LogProps extends Component {
componentDidUpdate(prevProps) {
console.log("before update", prevProps);
console.log("after update", this.props);
} render() {
const { forwardRef, ...rest } = this.props;
return <Component {...rest} ref={forwardRef} />;
}
} const forwardRef = (props, ref) => {
return <LogProps forwardRef={ref} {...props} />;
}; const name = Component.displayName || Component.name;
forwardRef.displayName = `logProps(${name})`; return React.forwardRef(forwardRef);
} export default logProps;
Display name:
Becasue HOC component doesn't have a correct display name in the dev tool, we need to set it up:
const forwardRef = (props, ref) => {
return <LogProps forwardRef={ref} {...props} />;
}; const name = Component.displayName || Component.name;
forwardRef.displayName = `logProps(${name})`; return React.forwardRef(forwardRef);
[React] Forward a DOM reference to another Component using forwardRef in React 16.3的更多相关文章
- react中的DOM操作
前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...
- JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- react ref获取dom对象
react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...
- react的非DOM操作
非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySe ...
- react 的虚拟dom
前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来. 所谓的虚拟DOM ...
- React:关于虚拟DOM(Virtual DOM)
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
- 深入理解 React 的 Virtual DOM
React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...
- React的虚拟DOM
ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...
随机推荐
- 原生JS---1
js的历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司. 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Bren ...
- tp3.2 复合查询or
tp3.2 复合查询or $where['goods_name'] = array("like","%$q%");$where['goods_sn'] = ar ...
- gitlab克隆报错:remote: HTTP Basic: Access denied;remote: You must use a personal access token with ‘api’ scope for Git over HTTP.
错误: remote: HTTP Basic: Access denied remote: You must use a personal access token with ‘api’ scope ...
- IDA逆向常用宏定义
/* This file contains definitions used by the Hex-Rays decompiler output. It has type definitions an ...
- Redis学习笔记(二)-key相关命令
Redis支持的各种数据类型包括string,list ,set ,sorted set 和hash . Redis本质上一个key-value db,所以我们首先来看看他的key.首先key也是字符 ...
- [编码]ASCII、GBK、Unicode(万国码) 和 UTF-8
American ASCII编码 (American Standard Code for Information Interchange,美国信息互换标准代码) China gbk编码 ...
- APP开发中的弹窗体系,UI设计师不能忽视的地方
1. 弹窗的定义 弹窗分为模态弹窗和非模态弹窗两种. 弹窗分类 模态弹窗:很容易打断用户的操作行为,用户必须回应,否则不能进行其他操作. 非模态弹窗:不会影响用户的操作,用户可以不对其进行回应,非模态 ...
- 九九乘法表---for循环的嵌套
package com.zuoye.test;//控制台输出九九乘法表public class Jiujiu { public static void main(String[] args) { in ...
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分
https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...