react循环有几种方法(React forwardRef的使用方法及注意点)
类别:编程学习 浏览量:1805
时间:2021-11-08 16:33:19 react循环有几种方法
React forwardRef的使用方法及注意点之前使用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)=>( <li ref={ref}> <B {...props} /> </li> ))
- 父组件创建一个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 ( <li> <button onClick={() => handleFoucus()}> 使用子组件中DOM元素的方法 </button> <Content ref={connectRef} /> </li> ); }; 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 ( <li> {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */} <input type="password" ref={ref} /> </li> ) }; export default forwardRef(Content);
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 ( <li> <button onClick={() => handleAdd()}> 使用子组件中class组件的属性和方法 </button> <Content ref={connectRef} /> </li> ); }; 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 ( <li> {/* 把ref绑定给传进来的ref ≈ ref={connectRef} */} <Header ref={ref} /> {/* class组件 */} {/* <Footer ref={ref} /> 函数组件是没有实例的,所以connectRef.current: null */} </li> ) }; export default forwardRef(Content)
import React from 'react'; export default class Header extends React.Component { state = { count: 0 }; render() { return ( <li> {this.state.count} </li> ) } };
高阶组件会把所有接收到的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 ( <li> <Content ref={connectRef} /> </li> ); }; // 被包装组件 const Content = (props) => { return ( <li> <input type="password" ref={props.forwardedRef} /> </li> ); }; // 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 ( <li> <Content forwardedRef={connectRef} /> </li> ); }; // 定义高阶组件 export const Hoc = (WrappedComponent) => { class Wrapper extends React.Component { render() { return <WrappedComponent {...props} /> } } } // 被包装的组件 const Content = (props) => { return ( <li> <input type="password" ref={props.forwardedRef} /> </li> ); }; // 包装过程 export default Hoc(Content); * */
以上就是React forwardRef的使用方法及注意点的详细内容,更多关于React forwardRef使用的资料请关注开心学习网其它相关文章!
标签:React forwardRef
您可能感兴趣
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- react组件分析(react-diagram 序列化Json解读案例分析)
- reactredux任务处理进度(一文搞懂redux在react中的初步用法)
- react自适应布局如何实现(React实现分页效果)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- vue react和angular(详解React Angular Vue三大前端技术)
- react hooks详解(React Hooks使用常见的坑)
- react重点和难点(关于React状态管理的三个规则总结)
- react跳转页面并传参数(react 跳转后路由变了页面没刷新的解决方案)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- react教程简介(react入门级详细笔记)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- react绑定详解(React列表栏及购物车组件使用详解)
- react执行流程(React开启代理的2种实用方式)
- react基础知识详解(如何深入理解React的ref 属性)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
热门推荐
- python怎么给rsa加密(Python生成rsa密钥对操作示例)
- centos7离线安装mysql5.7(CentOS7.5 安装MySql的教程)
- mysql查看执行慢的sql(系统隐形杀手——阻塞与等待SQL)
- druid数据库连接池原理详解(阿里巴巴Druid,轻松实现MySQL数据库加密!)
- laravel设置跨域请求(Laravel实现ApiToken认证请求)
- mysql什么是慢查询(MySQL慢查询的坑)
- python多线程实现(python多线程并发让两个LED同时亮的方法)
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- dede内容模型管理(Dede网站修改模板路径的方法 拒绝模板泄漏被盗)
- JS脚本中Null与Undefined的区别