React React.createRef(), React.forwardRef() 的简单 demo

在 react 中使用 ref 是件挺麻烦的事, 首先要声明一个变量 _ref, 再把变量带到目标节点的 ref 属性中, 用箭头函数声明个临时变量 i, 并把这个临时变量 i 传给 _ref

// 不完整代码
...
let refElement
...
<div ref={
   i => refElement = i}></div>
...

React.createRef() 方法可以简化这个步骤

// 不完整代码
...
let refElement2 = React.createRef();
...
<div ref={
   refElement2}></div>
...

React.forwardRef() 创建一个React组件, 可以把上级 ref 转发(传递) 给下级组件, 继而可以在上级组件中获取下级目标

注:

• 不能在函数组件上使用 ref 属性，因为他们没有实例
• 函数式组件, class 组件里都可以使用 React.createRef(), 差别只是要加上 this

demo

import React from "react";

class Bpp extends React.Component {
   
	render() {
   
		return (
			<div>{
   this.props