移动端H5开发-常用技巧篇

最新推荐文章于 2024-12-10 15:18:29 发布

Web_boom

最新推荐文章于 2024-12-10 15:18:29 发布

阅读量599

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/Android_boom/article/details/128321523

版权

本文详细介绍了在移动端H5开发中，如何利用React的useImperativeHandle、useRef和forwardRef等技巧来获取和操作组件内部元素。通过实例解析，阐述了这些方法在父组件控制子组件元素时的应用。

摘要由CSDN通过智能技术生成

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元