React.forwardRef的使用说明

React.forwardRef

React.forwardRef
forwardRef实际上就是当父组件需要得到子组件元素时，可以利用forwardRef来实现。
该方法接受一个有额外ref参数的react组件函数，不调用该方法，普通的组件函数是不会获得该参数的。

应用场景

ref 的作用是获取实例，可能是 DOM 实例，也可能是 ClassComponent 的实例。
但问题来了：
如果目标组件是一个 FunctionComponent 的话，是没有实例的（PureComponent），此时用 ref 去传递会报错

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

转发 refs 到 DOM 组件
在高阶组件中转发 refs

实例：
点击搜索按钮时，让文本输入框处于聚焦状态
1、普通用法：

import React, { Component } from 'react'export default class App extends Component {mytext=nullrender() {return (<div><button type="button" onClick={()=>{console.log(this.mytext);this.mytext.current.focus()this.mytext.current.value="2222"}}>获取焦点</button><Child callback={(el)=>{console.log(el);、//el是临时变量，用全局的去接这个值this.mytext=el//console.log(el.current);}}/></div>)}
}
class Child extends Component {mytext = React.createRef();//组件渲染完了执行componentDidMount() {this.props.callback(this.mytext);}render() {return (<div style={{background:"yellow"}}><input defaultValue="1111" ref={this.mytext}></input></div>);}
}

2、使用forwardRef

import React, { Component,forwardRef } from 'react'export default class App_forwardRef extends Component {mytext=React.createRef()render() {return (<div><button type="button" onClick={()=>{console.log(this.mytext);this.mytext.current.value="2222"}}>获取焦点</button><Child ref={this.mytext}/></div>)}
}
//这里Child是函数式组件
const Child=forwardRef((props,ref)=>{return (<div><input defaultValue="11111" ref={ref}></input></div>);
})

React.forwardRef的使用说明相关推荐

[react] 什么是React.forwardRef？它有什么作用？
[react] 什么是React.forwardRef?它有什么作用? React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中. ...
React.forwardRef
React.forwardRef 允许某些组件接收 ref(ref 是为了获取某个节点的实例),并将其向下传递给子组件 React.forwardRef的API中ref必须指向dom元素而不是Rea ...
react中ref、createRef、React.forwardRef分别是什么？如何使用？
一.react中ref.createRef.React.forwardRef (1)Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但 ...
React forwardRef的使用方法
作用与注意点传递ref,把自身的ref绑定到其他地方(e.g. 你把文件交给总裁秘书,总裁秘书把文件交给总裁) ref 和 key 有点特殊,不会作为props参数向下传递,this.props拿不 ...
React + TypeScript：元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
react 动态添加class_02.react进阶指南
react 进阶懒加载 React.lazy函数能让你像渲染常规组件一样处理动态引入(的组件). Suspense加载指示器为组件做优雅降级. fallback属性接受任何在组件加载过程中你想展示的 ...
React 之高阶组件的理解
1.基本概念高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
react map循环生成的button_关于Vue和React的一些对比及个人思考（中）
vue和React都是目前最流行.生态最好的前端框架之一.框架本身没有优劣之分,只有适用之别,选择符合自身业务场景.团队基础的技术才是我们最主要的目的. 博主1年前用的是Vue框架,近半年转技术栈到R ...
React Hooks 完全使用指南
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...

React.forwardRef的使用说明

React.forwardRef

应用场景

React.forwardRef的使用说明相关推荐

最新文章

热门文章