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的更多相关文章

  1. react中的DOM操作

    前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...

  2. JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  3. react ref获取dom对象

    react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...

  4. react的非DOM操作

    非dom属性?dangerouslySetInnerHTML,ref,key非dom标准属性,也就是说dom标准里面没有规定的属性,react引入了三个非dom属性,如上. dangerouslySe ...

  5. react 的虚拟dom

    前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来.  所谓的虚拟DOM ...

  6. React:关于虚拟DOM(Virtual DOM)

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

  7. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

  8. 深入理解 React 的 Virtual DOM

    React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...

  9. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

随机推荐

  1. 1.ArcGis几何图形之几何计算

    /// <summary> /// 检测几何图形A是否包含几何图形B /// </summary> /// <param name="pGeometryA&qu ...

  2. golang单点推送

    package main import ( "encoding/json" "flag" "fmt" "log" &qu ...

  3. A题时遇到的一些技巧

    这篇主要是讲刷题时候遇到的一些技巧,该篇保持持续更新状态.. 1.求数组的长度:int a[]={,,,}; int n = sizeof(a)/sizeof(a[0]) 2.求想上取整,例如7/3 ...

  4. js-var变量作用域

    看代码: var a=10; function fn1(){ alert(a); var a=20; alert(a); } 运行结果:undefined 和 20 注意: 在函数内,变量如没用var ...

  5. IN、EXISTS的相关子查询用INNER JOIN 代替--性能优化

    如果保证子查询没有重复 ,IN.EXISTS的相关子查询可以用INNER JOIN 代替.比如: IN.EXISTS的相关子查询用INNER JOIN 代替--sql2000性能优化

  6. 扩展银行项目,添加一个(客户类)Customer类。Customer类将包含一个Account对象。

    练习目标-使用引用类型的成员变量:在本练习中,将扩展银行项目,添加一个(客户类)Customer类.Customer类将包含一个Account对象. 任务 在banking包下的创建Customer类 ...

  7. 时序分析:HMM模型(状态空间)

    关于HMM模型:时序分析:隐马尔科夫模型 HMM用于手势识别: 训练时每一种手势对应一个HMM-Model,识别率取最大的一个HMM即可.  类似于一个封装的完成多类识别器功能单层网络. 优点: 尤其 ...

  8. 【转载】JSTL和EL的使用

    使用JSTL前的准备 想要使用JSTL,首先需要给工程导入JSTL的包(JSTL.jar和standard.jar). JSTL标签库 在JSTL中分为以下五个标签 核心标签 格式化标签 SQL标签 ...

  9. commons.dbutils 的使用列子

    c0p3的导入请参考前文 https://www.cnblogs.com/appium/p/10183016.html JdbcUtils: package cn.itcast.jdbc; impor ...

  10. Day 22 面向对象编程

    面向对象基础 面向对象编程(抽象) 对象:特征和技能的结合体 面向对象编程:一个个对象进行交互 优点:扩展性非常强 缺点:逻辑非常复杂 类与对象 类(类别):一系列具有相同特征和技能的对象 现实世界中 ...