react使用useImperativeHandle示例详解

目录
  • 1.前言
  • 2.useImperativeHandle初探
  • 3.获取元素的几种方式
    • 3.1 useRef:获取组件内部元素
    • 3.2 forwardRef:父组件获取子组件内部的一个元素
    • 3.3 useImperativeHandle:父组件可以获取/操作儿子组件多个元素

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获取元素的方法,先简单小结下步骤

  • 引入useRef,定义变量
  • 在需要获取的dom元素上使用ref进行变量绑定
  • 使用变量.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在父组件获取儿子组件内部一个元素时,操作如下。

  • 父组件按照useRef的规则绑定到儿子组件上
  • 儿子组件使用forwardRef包裹,并在函数组件传递的参数接收,第一个参数porps接收父组件传递的数据,第二个ref接收的就是dom引用
  • 在需要获取儿子组件的元素上直接绑定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的依赖数组,如果依赖数组内部传递的数据发生改变,就会重新触发回调函数。

以上就是react使用useImperativeHandle示例详解的详细内容,更多关于react使用useImperativeHandle的资料请关注我们其它相关文章!

(0)

相关推荐

  • 基于useImperativeHandle的使用解析

    目录 useImperativeHandle的使用 useImperativeHandle 使用useImperativeHandle时父组件第一次没拿到子组件方法 背景需求 问题 解决方法 useImperativeHandle的使用 你不能在函数组件上使用 ref 属性,因为它们没有实例: import React, { Component } from 'react'; function MyFunctionComponent() {   return <input /> } class

  • react中的useImperativeHandle()和forwardRef()用法

    目录 一.useImperativeHandle() 二.forwardRef() 三.案例 父组件 子组件 一.useImperativeHandle() useImperativeHandle(ref, createHandle, [deps]) useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值.在大多数情况下,应当避免使用 ref 这样的命令式代码. useImperativeHandle 应当与 forwardRef 一起使用. functio

  • 使用useImperativeHandle时父组件第一次没拿到子组件的问题

    目录 用useImperativeHandle父组件第一次没拿到子组件 背景需求 问题 解决方法 用useImperativeHandle让父组件操纵子组件的状态和方法 用useImperativeHandle父组件第一次没拿到子组件 背景需求 一个tab两个按钮A.B,默认选中的A,当点击到B时需要显示B对应的图表. 考虑到B的图表在页面加载时已经初始化完成,所以点击B时再调用图表的resize方法. 由于tab中的图表是写在子组件里,所以通过useImperativeHandle实现父组件调

  • react使用useImperativeHandle示例详解

    目录 1.前言 2.useImperativeHandle初探 3.获取元素的几种方式 3.1 useRef:获取组件内部元素 3.2 forwardRef:父组件获取子组件内部的一个元素 3.3 useImperativeHandle:父组件可以获取/操作儿子组件多个元素 1.前言 相比大家看到useImperativeHandle会感到十分陌生,但部分开源代码经常会出现它的身影,网上查阅的资料也是含糊不清.经过一翻资料查询,终于摸清了一点,现在分享给各位爷. 2.useImperativeH

  • React 路由使用示例详解

    目录 Router 简单路由 嵌套路由 未匹配路由 路由传参数 索引路由 活动链接 搜索参数 自定义行为 useNavigate 参考资料 Router react-router-dom是一个处理页面跳转的三方库,在使用之前需要先安装到我们的项目中: # npm npm install react-router-dom@6 #yarn yarn add react-router-dom@6 简单路由 使用路由时需要为组件指定一个路由的path,最终会以path为基础,进行页面的跳转.具体使用先看

  • React Redux应用示例详解

    目录 一 React-Redux的应用 1.学习文档 2.Redux的需求 3.什么是Redux 4.什么情况下需要使用redux 二.最新React-Redux 的流程 安装Redux Toolkit 创建一个 React Redux 应用 基础示例 Redux Toolkit 示例 三.使用教程 安装Redux Toolkit和React-Redux​ 创建 Redux Store​ 为React提供Redux Store​ 创建Redux State Slice​ 将Slice Reduc

  • React Hook用法示例详解(6个常见hook)

    1.useState:让函数式组件拥有状态 用法示例: // 计数器 import { useState } from 'react' const Test = () => { const [count, setCount] = useState(0); return ( <> <h1>点击了{count}次</h1> <button onClick={() => setCount(count + 1)}>+1</button> &l

  • ReactQuery系列React Query 实践示例详解

    目录 引言 客户端状态 vs 服务端状态 React Query 关于默认行为的解释 使用React Query DevTools 把query key理解成一个依赖列表 一个新的缓存入口 把服务端状态和客户端状态分开 enabled属性是很强大的 创建自定义hook 引言 当2018年GraphQL特别是Apolllo Client开始流行之后,很多人开始认为它将替代Redux,关于Redux是否已经落伍的问题经常被问到. 我很清晰地记得我当时对这些观点的不理解.为什么一些数据请求的库会替代全

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • React路由拦截模式及withRouter示例详解

    目录 一.路由拦截 二.路由模式 三.withRouter 一.路由拦截 在前面两篇 路由博客基础上,我们将ReactRouter.js的我的profile路由设置成路由拦截的: <Route path="/profile" render={() => isAuth() ? <Profile/> : <Redirect to="/login"></Redirect> }></Route> 新建Logi

  • React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • react redux及redux持久化示例详解

    目录 一.react-redux 二.redux持久化 一.react-redux react-redux依赖于redux工作. 运行安装命令:npm i react-redux: 使用: 将Provider套在入口组件处,并且将自己的store传进去: import FilmRouter from './FilmRouter/index' import {Provider} from 'react-redux' import store from './FilmRouter/views/red

  • react中使用antd及immutable示例详解

    目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im

随机推荐