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. PCB Genesis增加点阵字 实现原理

    我们采用Genesis增加点阵字时,用Genesis增加Canned Text即可,但奥宝中文不支持,且字符种类是有限的呀 不过没关系,没有自己造呀.在这里我分享一种增加点阵字的实现方法 一.通过代码 ...

  2. 0604-面向对象、类与对象、类、static、构造方法/析构方法

    一.面向对象 1.面向过程:一个人分步骤完成某个事情 2.面向对象:某件事情拆分为多个任务,由每个对象独立完成,最后调用整合为一个完整的项目 3.三要素:继承.封装.多态. 封装:私有化属性 提供公共 ...

  3. [原创]Linux(CentOS)下安装nodejs+express

    网上找了很多步骤,各种问题,自己总结下吧 1.下载 wget --no-check-certificate https://nodejs.org/dist/v6.10.1/node-v6.10.1-l ...

  4. 2星|《腾讯产品法》:标题党,作者只有QQ手机助手的短期产品经验

    腾讯产品法(一本书读懂腾讯产品思维与运营方法,<腾讯传>作者吴晓波推荐) 全书是作者的一些产品设计与运营的经验.如果书名不误导读者,这本书的内容值3星. 基于书名的误导,读后比较失望,作者 ...

  5. 三维重建:SLAM相关的一些术语解释

    SLAM是一个工程问题,再次复习一下工程中可能用到的名词解释. 还是不要看了,高翔的科普读物已经出版了,读他的<slam十四讲>就可以了. 一.度量相关: 世界坐标系:描述图像的平面坐标系 ...

  6. Maya API编程快速入门

    一.Maya API编程简介 Autodesk® Maya® is an open product. This means that anyone outside of Autodesk can ch ...

  7. css单双行样式

    #random_box li:nth-child(odd) {//双行 background: #fff5c4; } #random_box li:nth-child(even) {//单行 back ...

  8. JSP_内置对象_请求转发和请求重定向的区别

    请求重定向:客户端行为,response.sendRedirect(),从本质上将等同与两次请求,前一次请求request对象不会保存,地址栏的URL地址会改变. 请求转发:服务器行为,request ...

  9. 新浪某个tab 页模仿

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 【剑指Offer】49、把字符串转换成整数

      题目描述:   将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串转换整数的库函数. 数值为0或者字 ...