React forwardRef的使用方法及注意点
更新时间:2021年6月13日 15:01 点击:2008
之前使用react.forwardRef始终无法应用于react高阶组件中,最近终于捣鼓出来了,于是记录下来。关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。
React.forwardRef使用示例
下面就是应用到React组件的错误示例:
const A=React.forwardRef((props,ref)=><B {...props} ref={ref}/>)
这就是我之前经常犯的错误, 这里的ref是无法生效的。
前面提到ref必须指向dom元素,那么正确方法就应用而生:
const A=React.forwardRef((props,ref)=>( <div ref={ref}> <B {...props} /> </div> ))
作用与注意点
- 父组件创建一个ref对象,绑定给子组件中的Dom元素或class组件
- 函数组件是没有实例的
- 高阶组件需做特殊处理
父组件获取子组件中Dom元素实例
import React, { useRef } from 'react'; import Content from './content'; const Home = () => { // 创建一个Ref对象 const connectRef = useRef(null); const handleFoucus = () => { const _ref = connectRef.current; _ref.focus(); }; return ( <div> <button onClick={() => handleFoucus()}> 使用子组件中DOM元素的方法 </button> <Content ref={connectRef} /> </div> ); }; export default Home;
import React, { forwardRef } from 'react'; /** * forwardRef包裹后,ref会作为第二个参数,接收传进来的ref属性 * e.g. * <Content count={count} user={user} ref={connectRef}> * * @param props - {count, user} * @param ref - connectRef * */ const Content = (props, ref) => { return ( <div> {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */} <input type="password" ref={ref} /> </div> ) }; export default forwardRef(Content);
父组件获取子组件中class组件实例
import React, { useRef } from 'react'; import Content from './content'; const Home = () => { // 创建一个Ref对象 const connectRef = useRef(null); const handleAdd = () => { const _ref = connectRef.current; const { count } = _ref.state; _ref.setState({ count: count + 1 }) }; return ( <div> <button onClick={() => handleAdd()}> 使用子组件中class组件的属性和方法 </button> <Content ref={connectRef} /> </div> ); }; export default Home;
import React, { forwardRef } from 'react'; import Header from './header'; import Footer from './footer'; /** * forwardRef包裹后,ref会作为第二个参数,接收传进来的ref属性 * e.g. * <Content count={count} user={user} ref={connectRef}> * * @param props - {count, user} * @param ref - connectRef * */ const Content = (props, ref) => { return ( <div> {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */} <Header ref={ref} /> {/* class组件 */} {/* <Footer ref={ref} /> 函数组件是没有实例的,所以connectRef.current: null */} </div> ) }; export default forwardRef(Content)
import React from 'react'; export default class Header extends React.Component { state = { count: 0 }; render() { return ( <div> {this.state.count} </div> ) } };
高阶组件中的特殊情况
高阶组件会把所有接收到的props,传递给被包装的组件(透传)
ref 和 key 类似,不是一个prop,所以不会透传,ref会绑定到外层的包装容器上
/* 处理ref e.g. Hoc1(Hoc2(Content)) <Content ref={myRef} /> 给Content绑定的ref会绑定到Hoc1上,且不会继续向下传递 第一种方法 React.forwardRef =============== 在 Hoc1外面 用React.forwardRef()对ref做处理,用props来传递ref 0. 在高阶组件外面包裹forwardRef,拦截获取ref,增加一个props(xxx={ref}),真实组件通过props.xxx获取 1. 使用时传 ref={XXXX} // 和第二种方法不同的地方 2. 用forwardRef的第二个参数获取 ref 3. 增加一个新的props,用来向下转发ref e.g. forwardedRef={ref} 4. 真实组件中绑定 ref={props.forwardedRef} const Home = (props) => { const connectRef = useRef(null); return ( <div> <Content ref={connectRef} /> </div> ); }; // 被包装组件 const Content = (props) => { return ( <div> <input type="password" ref={props.forwardedRef} /> </div> ); }; // forwardRef的第二个入参可以接收ref,在Hoc外层对ref做处理 export default React.forwardRef((props, ref) => { const Wrapper = React.memo(Content); // Hoc // forwardRef包裹的是Wrapper // 需要在Wrapper中把ref向下传递给真实组件 // Wrapper中增加一个props属性,把ref对象作为props传给子组件 return <Wrapper {...props} forwardedRef={ref} />; }); 第二种方法 ========== 0. 使用时就用一个props来保存ref 1. 使用时传 xxx={ref} // 和第一种方法的不同点 2. 真实组件中绑定 ref={props.xxx} const Home = (props) => { const connectRef = useRef(null); return ( <div> <Content forwardedRef={connectRef} /> </div> ); }; // 定义高阶组件 export const Hoc = (WrappedComponent) => { class Wrapper extends React.Component { render() { return <WrappedComponent {...props} /> } } } // 被包装的组件 const Content = (props) => { return ( <div> <input type="password" ref={props.forwardedRef} /> </div> ); }; // 包装过程 export default Hoc(Content); * */
以上就是React forwardRef的使用方法及注意点的详细内容,更多关于React forwardRef使用的资料请关注猪先飞其它相关文章!
上一篇: React 高阶组件HOC用法归纳
下一篇: 微信小程序实现聊天室功能
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- React 是由 Facebook 软件工程师 Jordan Walke 创建,React 的第一个版本在七年前问世,现在,Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题,感兴趣的朋友跟随小编一起看看吧...2021-07-02