前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件
1.前言
相比大家看到useImperativeHandle会感到十分陌生,但部分开源代码经常会出现它的身影,网上查阅的资料也是含糊不清。经过一翻资料查询,终于摸清了一点,现在分享给各位爷。
2.useImperativeHandle
初探
React官网的定义
useImperativeHandle
可以让你在使用 ref
时自定义暴露给父组件的实例值。
个人理解
官网的话用大白话解析:useImperativeHandle的作用是将子组件的指定元素暴漏给父组件使用。也就是父组件可以访问到子组件内部的特定元素。
3.获取元素的几种方式
下面我将逐步介绍获取元素的方式,进而引出今天的主角useImperativeHandle。
3.1 useRef:获取组件内部元素
import {useRef} from "react"
export default function() {//1.const ele = useRef()//3.获取元素const getElememntP = () => {console.log(ele.current)}return <div ><button onClick={()=>getElememntP()}>获取p元素</button>//2.<p ref={ref}></p></div>
}
点击按钮,我们可以获取到p元素。上面是useRef获取元素的方法,先简单小结下步骤
1.引入useRef,定义变量
2.在需要获取的dom元素上使用ref进行变量绑定
3.使用变量.current获取对应元素
3.2 forwardRef:父组件获取子组件内部的一个元素
上面的useRef在函数组件可以获取自身组件内部的元素,但是如果我们需要在父组件获取或者操作儿子组件的一个元素,此时forwardRef就随之出现了。
father.js
import {useRef} from "react"
import Son from "./son"
export default function(){const eleP = useRef()const getElement = () => {console.log(eleP.current)}return <div><button onClick={()=>getElement()}>点击获取子组件的p元素</button><Son ref={eleP}/></div>
}
son.js
import {forwardRef} from "react"export default forwardRef(function(props,ref){return <div ><p ref={ref}></p></div>
})
父元素点击按钮后,可以获取到儿子组件的p元素。
forwardRef在父组件获取儿子组件内部一个元素时,操作如下。
1.父组件按照useRef的规则绑定到儿子组件上
2.儿子组件使用forwardRef包裹,并在函数组件传递的参数接收,第一个参数porps接收父组件传递的数据,第二个ref接收的就是dom引用
3.在需要获取儿子组件的元素上直接绑定ref的值
3.3 useImperativeHandle:父组件可以获取/操作儿子组件多个元素
经过上面层层递进,终于来到我们今天的主角了,请大声告诉我她的名字:是usexxxHandle。它可以在父组件内部直接获取儿子组件任意的dom元素对象。
father.js
import {useRef} from "react"
import Son from "./son"
export default function(){const eleP = useRef()const getElement = () => {console.log(eleP.current.ele1.current)console.log(eleP.current.ele2.current)}return <div><button onClick={()=>getElement()}>点击获取子组件元素</button><Son ref={eleP}/></div>
}
son.js
import {useRef,forwardRef,useImperativeHandle} from "react"
export default forwardRef(function(props,ref){const ele1 = useRef()const ele2 = useRef()useImperativeHandle(ref,()=>{return {ele1,ele2}},[])return <div ><h2 ref={ele1}></h2><h3 ref={ele2}></h3></div>
})
结果
<h2></h2>
<h3></h3>
父组件点击按钮后,可以一次性获取到多个标签元素,通过useImperativeHandle函数内部返回的对象可以获取对应的标签。具体使用直接看例子就行,我列举下useImperativeHandle的参数要求吧
useImperativeHandle(ref,()=>{return {dom1,dom2}
},[])
第一个参数是组件的第二个参数ref 第二个参数是一个回调函数,内部返回的对象就是抛给父组件的元素对象 第三个参数是一个依赖数组,类似useEffect的依赖数组,如果依赖数组内部传递的数据发生改变,就会重新触发回调函数。
最后
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件相关推荐
- 前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...
- h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- Java中使用poi导入、导出Excel
Java中使用poi导入.导出Excel 学习了:http://www.cnblogs.com/Damon-Luo/p/5919656.html 转载于:https://www.cnblogs.com ...
- java中jxl飘红_jxl导出excel文件,部署到tomcat中就会报错,为什么呢,求解!
在main函数中执行excel导出是可以的,但是部署到tomcat中就会抱一下错误,为什么呢,求解!SEVERE: Servlet.service() for servlet [Export] in ...
- boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现 动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
- 如何在React中做到jQuery-free
前言 前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
- react 中渲染html_如何在React中识别和解决浪费的渲染
react 中渲染html by Nayeem Reza 通过Nayeem Reza 如何在React中识别和解决浪费的渲染 (How to identify and resolve wasted r ...
- 如何在React中使用功能组件
Have you wondered how to create a component in React? 您是否想过如何在React中创建组件? To answer, it is as simple ...
最新文章
- 唐山松下焊接机器人编程招聘_机器人四小家族-松下Panasonic专注焊接
- [Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
- JVM参数设置、分析
- JEECG第14期架构培训班开始招生啦,本周三开班!
- jenkins添加linux作为slave
- 在Rayeager px2上搭建web服务器anmpp
- c统计多线程总时间_SQL Server处理器性能指标–第2部分–处理器:%用户时间,处理器:%特权时间,总时间和线程指标
- atitit.groovy 语法特性
- 使用ES6,Pt更好JavaScript。 II:深入学习课堂
- C#---委托与事件
- matlab简单仿真机器人
- 数据结构之图(九)——拓补排序
- python语句print(type(1j))的输出结果_Python 语句print(type(1J))的输出结果是:_学小易找答案...
- AI行业强者愈强?Tesra超算网络助力中小AI开发企业!
- intra-mart使用笔记
- php实现农历公历日期的相互转换
- 内网渗透(十一)之内网信息收集-内网IP扫描和发现
- PanDownload又复活了!抓紧保存...
- Oracle从11g导出后导入10g
- 利用JavaScript写一个简单的在线秒表
热门文章
- 高新技术企业研发费用怎么归集?
- html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放
- c语言9-1 计算职工工资,实验9-1 计算职工工资(结构数组表达方式)
- 【笔试题】维克多博士创造了一个裂变反应堆
- 机器人 郭启寅_郭启寅:机器人开创创新金融科技新纪元
- coreldraw x7 分布_CorelDRAW X7页面顺序怎么设置?
- 国产smartbits版本-minismb测试高恪路由器IP限速
- Nokia补牢,为时未晚
- Grafana+Prometheus打造运维监控系统(一)-安装篇
- 《TCP/IP详解 卷2》 笔记:TCP的输入函数:tcp_input